Develop Reference

Jquery UI Datepicker - Dependent Datepicker Exclude Holidays in Maxdate

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>

JQuery UI Datepicker - MaxDate exclude disabled days

I am trying to exclude disabled dates when counting MaxDate.
I tried many ways but still doesn't work.
Any suggestion?
02-12-2019 and Sundays has been disabled but the Maxdate include the disabled date.
Maxdate should be 3 days which excludes disabled days and Maxdays starts by today.
My goal is to add days if the days between today until max days has disabled.
Add 1 day per disabled day
Update
Now i am able to Exclude sunday when counting maxdate but i still can't exclude the array date where it should add one more day after 02-12-2019.
Updated Code :(
<script>
var array = ["02-12-2019"]
//new
function includeDate(date) {
return date.getDay() !== 7 && date.getDay() !== 0;
}
function getTomorrow(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1);
}
//prev
$('input').datepicker(
{
defaultDate: "+1d",
inline: true,
showOtherMonths: true,
changeMonth: true,
selectOtherMonths: true,
required: true,
showOn: "focus",
numberOfMonths: 1,
minDate: 1,
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
var isDisabled = ($.inArray(string, array) != -1);
return [includeDate(date) && !isDisabled];
},
maxDate: (function(max) {
var today = new Date();
var nextAvailable = getTomorrow(today);
var count = 0;
var countz = 1;
var newMax = 0;
while(count < max) {
if (includeDate(nextAvailable) ) {
count++;
}
if (includeDate(nextAvailable) ) {
countz++;
}
newMax++;
nextAvailable = getTomorrow(nextAvailable);
}
return newMax;
})
(3)
});
http://jsfiddle.net/3o1dmvw5/96/

This below should be the solution. The problem with your code is that you forgot to verify the date string to see if it is in the array or not using your includeDate() function. Thus, your includeDate() function allow that date, while maxDate didn't allow that date.
Also, you can also use array.indexOf() instead of jQuery's inArray. I am pretty sure that native array.indexOf() probably is faster.
Besides that, I modify your maxDate() function a little bit. It now look less confusing. I used window onload so that I can debug the code easy. You can just take that out.
For my version, when it come to verify the days, beforeShowDay and includeDate does the same thing. Thus, I edited beforeShowDay() to just return the value from the function includeDate().
Also, you should change the input selector to an ID(#) or Class(.). Otherwise, your datepicker will proc on all input fields.
Also, I modified you includeDate() function. There isn't a day 7 as 0 - 6 = Sunday - Saturday.
<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>
var array = ["02-12-2019"]
//new
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);
}
//prev
window.onload = function(){
$('input').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) {
// Next available is today at first.
var nextAvailable = new Date();
var count = 0;
var extra = 0;
while(count < max) {
/*
* Next available is here so that getTomorrow does not need
* to run an extra time when the loop is completed.
*
*/
nextAvailable = getTomorrow(nextAvailable);
// If the day is not available then we need to add an extra day.
if ( !includeDate(nextAvailable) ) {
extra++;
// Else we just increase the count.
} else {
count++;
}
}
// Return max + extra.
return max + extra;
})
(3)
});
};
</script>
<p>Date: <input type="text" id="datepicker"></p>

Foundation datepicker, end date (and time) cannot be before start date (and time)

I am using the Foundation-Datepicker and I have it so the user can only pick a start date that is after current date (i.e. all other values are unable to be selected).
I would like the end date to work in the same manner where the user can only pick a date after the start date.
I have the dates (days) working, i.e. user cannot select 1 January 2016 as the end date if the start date is 3 January 2016.
My first problem is due to the fact that I cannot have the start date to be the same as the end date, and secondly because I am also using time I would like it to disable all selections following the start date/time for end date/time popup.
i.e. user can select 1 January 2016, 13:00 as start and 1 January, 14:00 as end.
My code is the following:
// Get Date of today
var newDate = new Date();
// Prase newDate
var now = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), 0, 0, 0, 0);
// Initialize datepicker with restricted date
var startDate = $('.has-datepicker').fdatepicker({
format: "dd/mm/yyyy - hh:ii",
pickTime: true,
onRender: function (date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (e) {
if (e.date.valueOf() > endDate.date.valueOf()) {
var newDate = new Date(e.date);
newDate.setDate(newDate.getDate() + 1);
endDate.update(newDate);
}
}).data('datepicker');
var endDate = $('.has-datepicker2').fdatepicker({
format: "dd/mm/yyyy - hh:ii",
pickTime: true,
onRender: function (date) {
return date.valueOf() <= startDate.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(e) {
}).data('datepicker');

// implementation of disabled form fields
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').fdatepicker({
onRender: function (date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.update(newDate);
}
checkin.hide();
$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').fdatepicker({
onRender: function (date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function (ev) {
checkout.hide();
}).data('datepicker');
try like this.. better go through the site and docs fully

Calculate date from jquery datepicker

I am calculating the age from jquery datepicker. But this works when only the date is in(mm/dd/yy) format. I need to get this working in dd/mm/yy.
//Code
$('#dob').datepicker({
onSelect: function(value, ui) {
var today = new Date(),
dob = new Date(value),
age = new Date(today - dob).getFullYear() - 1970;
$('#age').text(age);
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true
});
If i try to set dateFormat: 'mm/dd/yy' in the property this wont work.
Any help?

Demo Fiddle mm/dd/yy Demo Fiddle dd/mm/yy
jQuery
onSelect: function (value, ui) {
var today = new Date();
var format = value.split("/");
var dob = new Date(format[2], format[0], format[1]);
var diff = (today - dob);
var age = Math.floor(diff / 31536000000);
$('#age').text(age);
},
Reference
Hope it helps....

Try this:
http://jsfiddle.net/lotusgodkk/GCu2D/120/
Js:
$('#dob').datepicker({
onSelect: function(value, ui) {
console.log(ui.selectedYear)
var today = new Date(),
dob = new Date(value),
age = ui.selectedYear - 1970; //This is the update
$('#age').text(age);
},
maxDate: '+0d',
yearRange: '1920:2010',
changeMonth: true,
changeYear: true,
});
If you inspect the ui object in console, you'll see that it stores year,day,month separately. You can access them like ui.selectedDay or selectedYear . Hope this helps.

this answer will work fine for the all the dates as the month starts from 0 in date function. for date format(dd-mm-yy).
var now= new Date();
var year= now.getFullYear();
$('#dob').datepicker({
onSelect: function (value, ui) {
var today = new Date();
console.log(today.getFullYear());
var format = value.split("-");
console.log(format[2]);
var dob = new Date(format[2], format[1]-1, format[0]);
console.log(dob);
var diff = (today - dob);
var age = Math.floor(diff / 31536000000);
$('#age').text(age);
},
dateFormat: 'dd-mm-yy',
maxDate: '+0d',
yearRange: '1920:'+year,
changeMonth: true,
changeYear: true
});

$("#dob").datepicker({
onSelect: function (value, ui) {
debugger
var today = new Date();
var year = today.getFullYear() - ui.selectedYear;
var month = today.getMonth() - ui.selectedMonth;
var date = today.getDate() - ui.selectedDay;
if ((year == 0 && month == 0 && date < 0) || (year == 0 && month < 0) || (year < 0)) {
$("#lbl6").show();
$("#age").val("");
} else if ((year == 0) || (year > 0 && month == 0 && date >= 0) || (year > 0 && month > 0)) {
$("#age").val(year);
} else if ((year > 0 && month == 0 && date < 0) || (year > 0 && month < 0)) {
$("#age").val(year - 1);
}
},
dateFormat: 'dd M y',
changeMonth: true,
changeYear: true,
yearRange: '1900:2020'
});

Showing the next month

I wonder how to set next month with showing only mondays active:
i tried to do smth like that but it wont work
function onlyMondaysNextMonth(date){
var day = date.getDay();
var mDate = date.getMonth() + 1;
return {
minDate: mDate,
}
return [(day == 1),''];
}
Thank you.

Use the following code to enable only Mondays starting from next month
var minDate = null;
var now = new Date();
if (now.getMonth() == 11) {
minDate = new Date(now.getFullYear() + 1, 0, 1);
} else {
minDate = new Date(now.getFullYear(), now.getMonth() + 1, 1);
}
/* create datepicker */
jQuery(document).ready(function () {
jQuery('#datepicker').datepicker({
minDate: minDate,
constrainInput: true,
beforeShowDay: beforeShowDay
});
});
function beforeShowDay(date) {
var day = date.getDay();
if (day == 1)
return [true]
return [false];
}
The working sample is hosted in http://elangovanr.com/samples/jquery/datepickermonday.html for your reference.