Develop Reference

jquery ui datepicker - how to set two min/max date restrictions in one datepicker?

I am using the jquery ui datepicker with select date range. I know that by default it already set if the from picks a date then the to date can not pick any date before the from date picked. I also checked the minDate and maxDate documents but I still couldn't try figuring it out.
I want to keep the default setting it has which is after date from is chosen date to cannot be before the from date vise versa but also want to add another restriction which is both datepickers have a maxDate of 0 which is today. None of them can be picked pass today.
This is pretty much just the standard.
$( "#date-from-field" ).datepicker({
onClose: function( selectedDate ) {
$( "#date-to-field" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#date-to-field" ).datepicker({
onClose: function( selectedDate ) {
$( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate );
}
});
I tried adding these two but none of them works though
$( "#date-from-field" ).datepicker({maxDate: "0"});
$( "#date-from-field" ).datepicker({maxDate: "+0m +0w"});
but none of them work though.
Thank you in advance.

Alright so pretty much you need to check if the selectedDate is empty when date-to-field is updated and make the maxDate to "0". Once you do it should act as you wanted, it'll set the max to today's date or if the date of the from if it's not todays date. Here's a codepen that works for me - CodePen.
$("#date-from-field").datepicker({
onClose: function( selectedDate ) {
$( "#date-to-field" ).datepicker( "option", "minDate", selectedDate );
},
maxDate: "0"
});
$("#date-to-field").datepicker({
onClose: function( selectedDate ) {
$( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? selectedDate: "0" );
},
maxDate: "0"
});
EDIT
Updated the CodePen a bit more so that it checks if the selected date is greater than todays date.
$("#date-to-field").datepicker({
onClose: function( selectedDate ) {
var possibleDate = new Date(selectedDate);
possibleDate = (possibleDate < new Date())?possibleDate: new Date();
$( "#date-from-field" ).datepicker( "option", "maxDate", selectedDate ? possibleDate: "0" );
},
maxDate: "0"
});

You can refer to this link : http://api.jqueryui.com/datepicker/#option-maxDate
This is to Initialize the datepicker with the maxDate option specified, not to set it up afterwards:
$( ".selector" ).datepicker({
maxDate: "+1m +1w"
});
To modify/get the option, use this:
Get or set the maxDate option, after initialization:
// Getter
var maxDate = $( ".selector" ).datepicker( "option", "maxDate" );
// Setter
$( ".selector" ).datepicker( "option", "maxDate", "+1m +1w" );
"+0" is for now()
Same for mindate!

How to disable previous dates on the TO calendar?

This is the script I am using. What changes to be done?
$( "#from" ).datepicker
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
$( "#to" ).datepicker
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3

I fixed it :-
Have to add this code in $( "#from" ).datepicker
onSelect: function( selectedDate ) {
$( "#to" ).datepicker( "option", "maxDate", selectedDate
Have to add this code in $( "#to" ).datepicker
onSelect: function( selectedDate ) {
$( "#toDateRange" ).datepicker( "option", "minDate", selectedDate

Do:
var today = new Date();
var yesterday = new Date(today.getFullYear(),today.getMonth(),today.getDate()-1)
then add below property in your to date picker function
minDate : yesterday

Here is complete to code for that
var dateToday = new Date();
$(".datefrom" ).datepicker({
dateFormat: 'dd/mm/yy',
minDate: dateToday,
onClose: function( selectedDate ) {
$( ".dateto" ).datepicker( "option", "minDate", selectedDate );
},
onSelect: function(selectedDate) {
var option = this.class == "datefrom" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
}
});
$(".dateto" ).datepicker({
dateFormat: 'dd/MM/yyyy',
onClose: function( selectedDate ) {
$( ".datefrom" ).datepicker( "option", "maxDate", selectedDate );
}
});
$('.datefrom,.dateto').change(selector)
It will disable the previous date in from calender and according to the selection done in from calender the to calender will get updated automatically and disabled previous date..

datepicker onClose issue

From researching on this site, I found a way to use 2 datepickers. If you pick a date on the first one, the second one will automatically show with the selected date as new minDate. You can see this in action on my test server here: http://www.zinius.nl/trips
The issue I'm having occurs in this situation:
Select the Check-in-date field, but don’t select a date and click somewhere else. You won’t be
able to get the Check-in-date field datepicker pop-up back up again until you refresh the entire page or first select the Check-out-date.
This is the code I am using:
$( "#datepicker1" ).datepicker({
showOn: 'both',
buttonImage: 'images/ico/calendar.png',
buttonImageOnly: true,
minDate: 0,
firstDay: 0,
dateFormat: 'mm-dd-yy',
changeMonth: false,
numberOfMonths: 1,
onClose: function( selectedDate ) {
var minDate = $(this).datepicker('getDate');
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#datepicker2" ).datepicker( "option", "minDate", newMin );
$( "#datepicker2" ).datepicker( "show" );
}
});
$( "#datepicker2" ).datepicker({
showOn: 'both',
buttonImage: 'images/ico/calendar.png',
buttonImageOnly: true,
minDate: '+1d',
changeMonth: false,
firstDay: 0,
dateFormat: 'mm-dd-yy',
numberOfMonths: 1,
onClose: function( selectedDate ) {
}
});
I tried replacing the onClose with onSelect. This solves the issue, but when I select a date on datepicker1, datepicker2 appears and disappears in a flash.
Does anyone have a solution to get this working properly?
Thank you,
Guilliano

Try to change your onClose function on the first datePicker with
...,
onClose: function( selectedDate ) {
var minDate = $(this).datepicker('getDate');
if(minDate){
var newMin = new Date(minDate.setDate(minDate.getDate() + 1));
$( "#datepicker2" ).datepicker( "option", "minDate", newMin );
$( "#datepicker2" ).datepicker( "show" );
}
}

Looking at the console, I can see this error being logged:
Cannot call method 'getDate' of null
It means your statement:
var minDate = $(this).datepicker('getDate');
is causing the problem. What you can do is to first check if the selectedDate (passed to the onClose callback) is valid or not, before attempting to getDate on it.
onClose: function(selectedDate) {
if (selectedDate) {
...
}
}

Issue in date foarmat in JQuery datepicker

I have 2 datepicker which binds to textboxes Chkin and Chkout. I need to display dates in dd/mm/y JQuery datepicker format. Problem is that when I try to get getFullYear() method of a dd/mm/y formatted date, I get result as of 19th hundred(as I know default starts with 1900). So when ever I select a date in my first datepicker, second date picker year changes to 1913(August 1913 in month view of August in datepicker 2) what I expected is 2013.
Below is my code-
$("#Chkin").datepicker({
dateFormat: 'dd/mm/y',
minDate: '+0',
onClose: function (dateText, inst) {
if ($("#ctl00_ContentPlaceHolder1_hdnDateformat").val() == "dd/mm/y") {
var parts = dateText.split("/");
var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
} else {
var cin = new Date(dateText);
}
var chkout = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate() + 1);
var maxCOut = new Date(cin.getFullYear(), cin.getMonth(), cin.getDate() + 7);
$("#Chkout").datepicker('option', 'minDate', chkout);
$("#Chkout").datepicker('option', 'maxDate', maxCOut);
$("#Chkout").datepicker("setDate", chkout);
}
});

Check your system time. It must be pointing wrong date.
Also assign datepicker to Chkout
$("#Chkin, #Chkout").datepicker({
...
...
});
check this JSFiddle

Check this
It should work for you.
jQuery(function($){
$( "#Chkin" ).datepicker({
minDate: '+0',
changeMonth: true,
numberOfMonths: 1,
dateFormat: 'dd/mm/y',
onClose: function( selectedDate ) {
$( "#Chkout" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#Chkout" ).datepicker({
defaultDate: "+0",
dateFormat: 'dd/mm/y',
changeMonth: true,
numberOfMonths: 1,
onClose: function( selectedDate ) {
$( "#Chkin" ).datepicker( "option", "maxDate", selectedDate );
}
});
});

Change this line:
var cin = new Date(Number(parts[2]), Number(parts[1]) - 1, Number(parts[0]));
to this:
var cin = new Date(Number(20 + parts[2]), Number(parts[1]) - 1, Number(parts[0]));
Before creating the new date, you must turn it back into a four-digit year, so that the javascript Date() command knows which century to use.

Date formatting (jQuery datepicker)

I want to change the date format from mm/dd/yyyy to dd/mm/yyyy.
After the date picker performs its action, I want the dd/mm/yyyy to display
in the text box.
<script>
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function( selectedDate ) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );
dates.not( this ).datepicker( "option", option, date );
}
});
});
</script>

Try this:
$('#from, #to').datepicker({ dateFormat: 'dd/mm/yyyy' });
it can help you...

.datepicker({ dateFormat: 'dd-mm-yy' })
using dateFormat option you can change the format of date,rest whatever option you want you can provide it