I use a datepicker for choosing an appointment day. I already set the date range to be only for the next month. That works fine. I want to exclude Saturdays and Sundays from the available choices. Can this be done? If so, how?
There is the beforeShowDay option, which takes a function to be called for each date, returning true if the date is allowed or false if it is not. From the docs:
beforeShowDay
The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable and 1 equal to a CSS class name(s) or '' for the default presentation. It is called for each day in the datepicker before is it displayed.
Display some national holidays in the datepicker.
$(".selector").datepicker({ beforeShowDay: nationalDays})
natDays = [
[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
[4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
[7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
[10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
];
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1
&& date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}
One built in function exists, called noWeekends, that prevents the selection of weekend days.
$(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })
To combine the two, you could do something like (assuming the nationalDays function from above):
$(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
Update: Note that as of jQuery UI 1.8.19, the beforeShowDay option also accepts an optional third paremeter, a popup tooltip
If you don't want the weekends to appear at all, simply:
CSS
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
display: none;
}
The datepicker has this functionality built in!
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
http://api.jqueryui.com/datepicker/#utility-noWeekends
These answers were very helpful. Thank you.
My contribution below adds an array where multiple days can return false (we're closed every Tuesday, Wednesday and Thursday). And I bundled the specific dates plus years and the no-weekends functions.
If you want weekends off, add [Saturday], [Sunday] to the closedDays array.
$(document).ready(function(){
$("#datepicker").datepicker({
beforeShowDay: nonWorkingDates,
numberOfMonths: 1,
minDate: '05/01/09',
maxDate: '+2M',
firstDay: 1
});
function nonWorkingDates(date){
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[7, 29, 2009], [8, 25, 2010]];
var closedDays = [[Monday], [Tuesday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
}
}
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] - 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
}
}
return [true];
}
});
The solution here that everyone likes seems to very intense... personally I think it's much easier to do something like this:
var holidays = ["12/24/2012", "12/25/2012", "1/1/2013",
"5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013",
"11/29/2013", "12/24/2013", "12/25/2013"];
$( "#requestShipDate" ).datepicker({
beforeShowDay: function(date){
show = true;
if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
for (var i = 0; i < holidays.length; i++) {
if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
}
var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
return display;
}
});
This way your dates are human readable. It's not really that different it just makes more sense to me this way.
You can use noWeekends function to disable the weekend selection
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
This version of code will make u to get the holiday dates from the sql database and disable the specified date in the UI Datepicker
$(document).ready(function (){
var holiDays = (function () {
var val = null;
$.ajax({
'async': false,
'global': false,
'url': 'getdate.php',
'success': function (data) {
val = data;
}
});
return val;
})();
var natDays = holiDays.split('');
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (var i = 0; i ‘ natDays.length-1; i++) {
var myDate = new Date(natDays[i]);
if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$("#shipdate").datepicker({
minDate: 0,
dateFormat: 'DD, d MM, yy',
beforeShowDay: noWeekendsOrHolidays,
showOn: 'button',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true
});
});
});
Create a Database in sql and put you holiday dates in MM/DD/YYYY format as Varchar
Put the below contents in a file getdate.php
[php]
$sql="SELECT dates FROM holidaydates";
$result = mysql_query($sql);
$chkdate = $_POST['chkdate'];
$str='';
while($row = mysql_fetch_array($result))
{
$str .=$row[0].'';
}
echo $str;
[/php]
Happy Coding !!!! :-)
$("#selector").datepicker({ beforeShowDay: highlightDays });
...
var dates = [new Date("1/1/2011"), new Date("1/2/2011")];
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (date - dates[i] == 0) {
return [true,'', 'TOOLTIP'];
}
}
return [false];
}
In this version, month, day, and year determines which days to block on the calendar.
$(document).ready(function (){
var d = new Date();
var natDays = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];
function nationalDays(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (i = 0; i < natDays.length; i++) {
if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
{
return [false];
}
}
return [true];
}
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
$(function() {
$(".datepicker").datepicker({
minDate: new Date(d.getFullYear(), 1 - 1, 1),
maxDate: new Date(d.getFullYear()+1, 11, 31),
hideIfNoPrevNext: true,
beforeShowDay: noWeekendsOrHolidays,
});
});
});
In the latest Bootstrap 3 version (bootstrap-datepicker.js) beforeShowDay expects a result in this format:
{ enabled: false, classes: "class-name", tooltip: "Holiday!" }
Alternatively, if you don't care about the CSS and tooltip then simply return a boolean false to make the date unselectable.
Also, there is no $.datepicker.noWeekends, so you need to do something along the lines of this:
var HOLIDAYS = { // Ontario, Canada holidays
2017: {
1: { 1: "New Year's Day"},
2: { 20: "Family Day" },
4: { 17: "Easter Monday" },
5: { 22: "Victoria Day" },
7: { 1: "Canada Day" },
8: { 7: "Civic Holiday" },
9: { 4: "Labour Day" },
10: { 9: "Thanksgiving" },
12: { 25: "Christmas", 26: "Boxing Day"}
}
};
function filterNonWorkingDays(date) {
// Is it a weekend?
if ([ 0, 6 ].indexOf(date.getDay()) >= 0)
return { enabled: false, classes: "weekend" };
// Is it a holiday?
var h = HOLIDAYS;
$.each(
[ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ],
function (i, x) {
h = h[x];
if (typeof h === "undefined")
return false;
}
);
if (h)
return { enabled: false, classes: "holiday", tooltip: h };
// It's a regular work day.
return { enabled: true };
}
$("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });
This work for me:
$( "#datepicker" ).datepicker({
beforeShowDay: function( date ) {
var day = date.getDay();
return [ ( day > 0 && day < 6 ), "" ];
}
});
For Saturday and Sunday You can do something like this
$('#orderdate').datepicker({
daysOfWeekDisabled: [0,6]
});
To Disable the Weekends the API has a built-in feature
$('#data_1 .input-group.date').datepicker({
daysOfWeekDisabled: [0,6],
});
0 = Sunday
6 = Sunday
Related
I am trying to exclude Array Dates and Sundays in Dependent Datepicker.
The first datepicker works really well while the second datepicker doesn't exclude Array dates and sundays in Maxdate.
Second datepicker must selectable within 7 working days which should exclude Sunday and Array Dates.
I believe there's should be an easy way to achieve this.
Any Suggestion?
Here's the code :(
$(document).ready(function() {
var d = new Date();
var array = ["10-12-2019","05-12-2019"];
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
today = monthNames[d.getMonth()] + ' ' + d.getDate() + ' ' + d.getFullYear();
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$('#datepicker2').attr('readonly', 'readonly');
$('#datepicker1').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + extra;
})
(3)
});
$('#datepicker1').change(function () {
var from = $('#datepicker1').datepicker('getDate');
var date_diff = Math.ceil((from.getTime() - Date.parse(today)) / 86400000);
var maxDate_d = date_diff + 7 +'d';
date_diff = date_diff + 'd';
$('#datepicker2').val('').removeAttr('readonly').removeClass('hasDatepicker').datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff +1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + extra;
})
(7)
});
});
});
http://jsfiddle.net/nLveychs/83/
For your code, it is almost right. You just forgot one thing for the second date picker. That is, you did not add the date_diff value to the return value of the maxDate() anonymous function. I was going to pass the date_diff by adding it to the parameter. Nonetheless, I found a bug. It can't be done that way, because any previous un-selectable days, will turn into additional extra days. Thus, the only way to add date_diff is start from the day of date picker1 and add the return value of maxDate's anonymous function to date_diff.
I also took out some unnecessary codes. You can just get the date differences simply subtracting datepicker1 date to today date without needing to parse a date string. Plus, date_diff can be as was without needing a "d" to be added to it.
Also, take note that, when you calculate the different days between two dates, for your code, it work that way, because datepicker's date picked object is set to the 0 hour of the day. That code may not work for other scenario. The for sure way to get the day difference between two dates is by setting their hours, minutes, seconds, and milliseconds(if needed) to zeroes.
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
var array = ["10-12-2019","05-12-2019"];
function includeDate(date) {
var dateStr = jQuery.datepicker.formatDate('dd-mm-yy', date);
// Date 0 = Sunday & 6 = Saturday
return date.getDay() !== 0 && array.indexOf(dateStr) === -1;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
$('#datepicker2').attr('readonly', 'readonly');
$('#datepicker1').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
return max + extra;
})
(3)
});
$('#datepicker1').change(function () {
var from = $('#datepicker1').datepicker('getDate');
// Date diff can be obtained like this without needing to parse a date string.
var date_diff = Math.ceil((from - new Date()) / 86400000);
$('#datepicker2').val('').removeAttr('readonly').removeClass('hasDatepicker').datepicker({
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: date_diff + 1,
beforeShowDay: function(date) {
return [includeDate(date)];
},
maxDate: (function(max) {
var nextAvailable = $('#datepicker1').datepicker('getDate');
var count = 0;
var extra = 0;
while(count < max) {
nextAvailable = getTomorrow(nextAvailable);
if ( !includeDate(nextAvailable) ) {
extra++;
} else {
count++;
}
}
/*
* Date diffent have to be added to return value.
*/
return max + date_diff + extra;
})
(7)
});
});
});
</script>
<p>datepicker1 <input id="datepicker1"></p>
<p>datepicker2 <input id="datepicker2"></p>
I know, the title isn't really specific, but I have a problem with DatePicker. I try to disable the national days, weekend and 48 hours after today. For the moment I did this :
Hide today + 48hours, I use minDate: 3
Hide weekend
Hide national days, they are saved in an array
Hide (today + 48h) + weekend (5 days to disable), code in beforeShow attribute
My code look like this for the moment :
function noWeekendsOrHolidays(date) {
var dateTime = new Date();
var dayOfWeek = dateTime.getDay();
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
natDays = [
[1, 1, 'au'], [5, 1, 'ar'], [5, 8, 'ar'], [7, 14, 'us'], [8, 15, 'id'], [11, 1, 'lb'], [11, 11, 'lb'], [12, 25, 'ke']
];
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
return [false, ''];
}
}
return [true, ''];
} else {
return noWeekend;
}
}
function addDatePicker(pSelname)
{
$(pSelname).datepicker({
stepMonths: 1,
firstDay: 1,
regional:'fr',
dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
dayNamesMin: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
monthNames: ['Janvier','Fevrier','Mars','Avril','Mai','Juin','Juillet','Aout','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Jan','Fev','Mai','Avr','Mai','Juin','Juil','Aou','Sep','Oct','Nov','Dec'],
dateFormat: 'dd-mm-yy',
beforeShowDay: noWeekendsOrHolidays,
minDate: 3,
beforeShow : function() {
var dateTime = new Date();
var dayOfWeek = dateTime.getDay();
if(dayOfWeek == 4 || dayOfWeek == 5) {
$(this).datepicker( "option", "minDate", "5" );
}
}
});
}
So, I don't know how to handle the case : (today + 48hours) + weekend + national day in the week. I wrote several cases that I need to reproduce on the DatePicker :
If the current day is monday 14 September, and if there is a national day (2015-09-14 or 2015-09-15 or 2015-09-16 or 2015-09-17), the next day selectable will be friday 2015-09-18.
((today + 48h) + 1 national day = 4 days disable)
If the current day is Thuesday 15 September, and if there is a national day (2015-09-15 or 2015-09-16 or 2015-09-17 or 2015-09-18), the next day selectable will be monday 2015-09-21.
((today + 48h) + 1 national day + weekend = 6 days disable)
If the current day is Wednesday 16 September, and if there is a national day (2015-09-16 or 2015-09-17 or 2015-09-18 or 2015-09-21), the next day selectable will be Thuesday 2015-09-22.
((today + 48h) + 1 national day + weekend = 6 days disable)
If the current day is Thursday 17 September, and if there is a national day (2015-09-17 or 2015-09-18 or 2015-09-21 or 2015-09-22), the next day selectable will be wednesday 2015-09-23.
((today + 48h) + 1 national day + weekend = 6 days disable)
If the current day is friday 18 September, and if there is a national day (2015-09-18 or 2015-09-21 or 2015-09-22 or 2015-09-23), the next day selectable will be thursday 2015-09-24.
((today + 48h) + 1 national day + weekend = 6 days disable)
I don't count if there is a national days in the weekend.
The function noWeekendsOrHolidays is executed for each day in the month, so I need to check day by day if there is a national day.
JS FIDDLE
So my first question is : This is really possible to do? Which algorithm can I make to resolve that problem?
Thanks
So, I don't know how to handle the case : (today + 48hours) + weekend
+ national day in the week.
So my first question is : This is really possible to do ?
Yes.
Which algorithme can i make to resolve that problem ?
Break down your problem into smaller pieces. Here is a crude example:
Weekend(s):
You don't need to do anything extra as the jQuery UI Datepicker will do it for you. You only call the noWeekends method with the selected date:
jQuery.datepicker.noWeekends(selDate)
National Days:
You can have an array containing the days, like this:
var nationalDays = ['2015-09-17', '2015-09-21', '2015-09-28'];
Next, create a function which will check if a particular day exists in that array. Something like this:
function chkNationalDays(selectedDate) {
var retVal = [true, '', ''];
nationalDays.forEach(function(dt) {
var today = new Date(dt);
if (isEqual(selectedDate, today)) {
retVal = [false, '', '']; return;
}
});
return retVal;
};
Remember that the beforeShowDay expects an array of three values (0) a boolean specifying if the current date needs to be disabled (1) a css class for styling that date, and (2) a text to show in the tooltip.
Today and next 48 hours i.e. Today and next two days:
Create another function to check this. Something like:
function chkNext2Days(selectedDate) {
var today = new Date();
if (isEqual(selectedDate, today)) return [false, '', ''];
today.setDate(today.getDate() + 1);
if (isEqual(selectedDate, today)) return [false, '', ''];
today.setDate(today.getDate() + 1);
if (isEqual(selectedDate, today)) return [false, '', ''];
return [true, '', ''];
}
And return the array which beforeShowDay expects.
Combine all of the cases:
Now combine all of the cases together to check if any returns a false for the first element of the returned arrays. Very simply but crudely, it looks like this:
function noWeekendsOrHolidays(selDate) {
var noWeekend = jQuery.datepicker.noWeekends(selDate),
noNationalDays = chkNationalDays(selDate),
noNext2Days = chkNext2Days(selDate),
retVal = true;
if (noWeekend[0]) {
if (noNationalDays[0]) {
return noNext2Days;
} else {
return noNationalDays;
}
} else {
return noWeekend;
}
};
Finally, set the callback on beforeShowDay.
This is simple:
$("#dateInput").datepicker({
beforeShowDay: noWeekendsOrHolidays,
...
});
Here is a working demo, with all that code:
Snippet:
var nationalDays = ['2015-09-17', '2015-09-21', '2015-09-28'];
$("#dt1").datepicker({
dateFormat : 'yy-mm-dd',
beforeShowDay: noWeekendsOrHolidays
});
function noWeekendsOrHolidays(selDate) {
var noWeekend = jQuery.datepicker.noWeekends(selDate),
noNationalDays = chkNationalDays(selDate),
noNext2Days = chkNext2Days(selDate),
retVal = true;
if (noWeekend[0]) {
if (noNationalDays[0]) {
return noNext2Days;
} else {
return noNationalDays;
}
} else {
return noWeekend;
}
};
function chkNext2Days(selectedDate) {
var today = new Date();
if (isEqual(selectedDate, today)) return [false, '', ''];
today.setDate(today.getDate() + 1);
if (isEqual(selectedDate, today)) return [false, '', ''];
today.setDate(today.getDate() + 1);
if (isEqual(selectedDate, today)) return [false, '', ''];
return [true, '', ''];
}
function chkNationalDays(selectedDate) {
var retVal = [true, '', ''];
nationalDays.forEach(function(dt) {
var today = new Date(dt);
if (isEqual(selectedDate, today)) {
retVal = [false, '', '']; return;
}
});
return retVal;
};
function isEqual(srcDate, tarDate) {
if ((srcDate.getDate() == tarDate.getDate()) &&
(srcDate.getMonth() == tarDate.getMonth()) &&
(srcDate.getFullYear() == tarDate.getFullYear())) {
return true;
} else { return false; }
}
<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
Date: <input id="dt1" />
Fiddle: http://jsfiddle.net/abhitalks/ug5xx4t5/1/
I'm using the code from JQuery UI Datepicker Disbale Next Day After 12pm to disable weekends, public holidays and next day (if selected after 10am), but I'm stuck on how to only allow Tuesday, Wednesday and Thursday to be selected.
// dates
var dateMin = new Date();
var weekDays = AddWeekDays(1);
dateMin.setDate(dateMin.getDate() + weekDays);
var natDays = [
[1, 1, 'uk'],
[12, 25, 'uk'],
[12, 26, 'uk']
];
function noWeekendsOrHolidays(date) {
var noWeekend = $j.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}
function AddWeekDays(weekDaysToAdd) {
var mydate = new Date();
if (mydate.getHours()>=10)
var daysToAdd = 1;
else var daysToAdd = 0;
var day = mydate.getDay()
weekDaysToAdd = weekDaysToAdd - (5 - day)
if ((5 - day) < weekDaysToAdd || weekDaysToAdd == 1) {
daysToAdd = (5 - day) + 2 + daysToAdd
} else { // (5-day) >= weekDaysToAdd
daysToAdd = (5 - day) + daysToAdd
}
while (weekDaysToAdd != 0) {
var week = weekDaysToAdd - 5
if (week > 0) {
daysToAdd = 7 + daysToAdd
weekDaysToAdd = weekDaysToAdd - 5
} else { // week < 0
daysToAdd = (5 + week) + daysToAdd
weekDaysToAdd = weekDaysToAdd - (5 + week)
}
}
return daysToAdd;
}
$j('.input-text.addon.addon-custom').datepicker({
beforeShowDay: noWeekendsOrHolidays,
minDate : dateMin,
defaultDate: +1,
firstDay: 1,
changeFirstDay: true,
dateFormat: "DD, dd MM yy"
});
Any help would be very much appreciated.
Fiddle here: http://jsfiddle.net/prydonian/4k4gga6j/
On your datepicker function, add the "beforeShowDay" option like this.
jQuery('#datepicker').datepicker({
minDate: dateMin,
defaultDate: +1,
firstDay: 1,
changeFirstDay: true,
dateFormat: "DD, dd MM yy",
beforeShowDay: function(day){
if (day.getDay()<2 || day.getDay()>4){
return [false, ""];
}
return noWeekendsOrHolidays(day);
}
});
here is the Fiddle updated: http://jsfiddle.net/4k4gga6j/3/
If I understood you right, you need to exclude any day other than Tuesday, Wednesday and Thursday? If the answer is yes, then you should add the following code to your existing noWeekendsOrHolidays method:
($.inArray(date.getDay(), [2, 3, 4]) != -1)
here is updated jsFiddle http://jsfiddle.net/4k4gga6j/4/
I would like to highlight date ranges on a jQuery datepicker.
var dates = new Array();
dates[0] = [new Date(2014,2,23), new Date(2014,2,30)];
dates[1] = [new Date(2014,2,13), new Date(2014,2,20)];
$(function() {
$('#datepicker').datepicker({
numberOfMonths: 1,
minDate: '-0m',
beforeShowDay: function (date) {
for (i=0;i<dates.length;i++) {
var date1 = dates[i][0];
var date2 = dates[i][1];
return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
}
}
})
});
The above doesn't work since only one range is visible. How can I get a loop going so that it highlights more than one range? Thanks for your help!
Fiddle
The problem is that you have the return inside the loop
for that reason on the end of the first loop the function is returning true or false
You should do something like:
var dates = new Array();
dates[0] = [new Date(2014,2,23), new Date(2014,2,30)];
dates[1] = [new Date(2014,2,13), new Date(2014,2,20)];
$(function() {
$('#datepicker').datepicker({
numberOfMonths: 1,
minDate: '-0m',
beforeShowDay: function (date) {
var bool = true;
for (i=0;i<dates.length;i++) {
var date1 = dates[i][0];
var date2 = dates[i][1];
bool = bool && date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : "";
}
return bool;
}
})
});
Try
var dates = new Array();
dates[0] = [new Date(2014, 2, 23), new Date(2014, 2, 30)];
dates[1] = [new Date(2014, 2, 13), new Date(2014, 2, 20)];
$(function () {
$('#datepicker').datepicker({
numberOfMonths: 1,
minDate: '-0m',
beforeShowDay: function (date) {
var flag = false,
date1, date2, i;
for (i = 0; i < dates.length; i++) {
date1 = dates[i][0];
date2 = dates[i][1];
flag = (!date1 || date.getTime() >= date1.getTime()) && (!date2 || date.getTime() <= date2.getTime())
if (flag) {
break;
}
}
return [true, flag ? "dp-highlight" : ""];
}
})
});
Demo: Fiddle
I have 2 inputs where dates are selected #startdate and #enddate. I am using datepicker and have currently disabled weekends and holidays, this is working great!
I then have a #days input which calculates the difference between the 2 dates, this date difference then has a weekend count taken from it.
I would like to create a holiday count so I can also minus this from the differnce in days.
So i would end up with
$('#days').val((Math.abs(($d2new-$d1new)/86400000) - weekend_count - holidaycount) + 1);
My current code is as follows (this has been taken form other stackoverflow questions and is working great :) towards the bottom is the var holidaycount which is what i am struggling with. Any help would be greatly appreciated.
//holidays
var natDays = [
[1, 1, 'uk'],
[1, 2, 'uk'],
[1, 3, 'uk'],
[1, 4, 'uk'],
[12, 24, 'uk'],
[12, 25, 'uk'],
[12, 26, 'uk'],
[12, 27, 'uk'],
[12, 28, 'uk'],
[12, 29, 'uk'],
[12, 30, 'uk'],
[12, 31, 'uk']
];
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
if (noWeekend[0]) {
return nationalDays(date);
} else {
return noWeekend;
}
}
function nationalDays(date) {
for (i = 0; i < natDays.length; i++) {
if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
return [false, natDays[i][2] + '_day'];
}
}
return [true, ''];
}
// do initialization here
$("#startdate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
yearRange: '0:+100',
beforeShowDay: noWeekendsOrHolidays,
onSelect: function( selectedDate ) {
$("#enddate").datepicker("option","minDate",selectedDate );
$("#enddate2").datepicker("option","minDate",selectedDate );
},
minDate: '+1d',
maxDate: '+' + DAY_DIFFERENCE + 'd'
});
// do initialization here
$("#enddate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
yearRange: '0:+100',
beforeShowDay: noWeekendsOrHolidays,
maxDate: '+' + DAY_DIFFERENCE + 'd'
});
// do initialization here
$("#enddate2").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
yearRange: '0:+100',
beforeShowDay: noWeekendsOrHolidays,
onSelect: function( selectedDate ) {
$d1 = $('#startdate').val();
$d2 = $('#enddate2').val();
$myDateParts1 = $d1.split("-");
$myDateParts2 = $d2.split("-");
$d1flip = new Date($myDateParts1[2], ($myDateParts1[1]-1), $myDateParts1[0]);
$d2flip = new Date($myDateParts2[2], ($myDateParts2[1]-1), $myDateParts2[0]);
$newdate1 = $d1flip.format("ddd mmm dd hh:MM:ss yyyy");
$newdate2 = $d2flip.format("ddd mmm dd hh:MM:ss yyyy");
// For Opera and older winXP IE n such
$d1new = Date.parse($newdate1);
$d2new = Date.parse($newdate2);
var weekend_count = 0;
for (i = $d1new.valueOf(); i <= $d2new.valueOf(); i+= 86400000){
var temp = new Date(i);
if (temp.getDay() == 0 || temp.getDay() == 6) {
weekend_count++;
}
}
var holidaycount = 0;
for (i = $d1new.valueOf(); i <= $d2new.valueOf(); i+= 86400000){
var temp = new Date(i);
if (**date in var natDays & is in selected difference range**) {
holidaycount++;
}
}
console.log(weekend_count);
console.log(holidaycount);
$('#days').val((Math.abs(($d2new-$d1new)/86400000) - weekend_count - holidaycount) + 1);
}
});
}, 'html');
return false;
});
}
EDIT
From the answer, I have inserted the function and tried this....
console.log(holidaycount); returns 0 but with the chosen dates i selected it should have been 10
var holidaycount = 0;
for (i = $d1new.valueOf(); i <= $d2new.valueOf(); i+= 86400000){
var temp = new Date(i);
if (isHoliday(temp)) {
holidaycount++;
}
}
UPDATE: modified getMonth() to getMonth() + 1 accordingly to the comments.
**date in var natDays & is in selected difference range**
date is in selected difference range is always true as new Date(i) is inside said range (just like in the loop for weekend_count: you didn't bother with checking whether you're in the range).
Now, checking if the date inside temp is a holiday, you may want to use a function (though you still can do it straight in your code):
/* dateObject is a JS Date object (e.g. dateObject = new Date();) */
/* country is the country we test holidays for */
function isHoliday(dateObject, country) {
/* let's assume natDays is global, otherwise pass it as a third argument to this function */
for(var i = 0; i < natDays.length; i++) {
/* natDays[i][0] is a day, natDays[i][1] is a month, natDays[i][2] is a country indicator */
if(parseInt(dateObject.getDate()) == parseInt(natDays[i][0]) && parseInt(dateObject.getMonth()) + 1 == parseInt(natDays[i][1]) && country.toLowerCase() == natDays[i][2].toLowerCase()) {
/* found a day and a month matching our current Date's day and month: interrupt and tell caller dateObject is a holiday */
return true;
}
}
/* end of loop, we parsed all possible holidays without finding any match for our Date: tell caller the given Date is not a holiday */
return false;
}
Now to put it in your code:
if (isHoliday(temp, 'uk')) {
holidaycount++;
}
This should do the trick, though it may require some refactoring (did not test this code), and there is probably more elegant ways to do it (like modding the Date object's prototype to use this function as a method of the object).