Reputation: 14141
I have two jQuery datepickers to select a from and to dates. I have the following code that if you select the 15th June in the first then in the second you now can only select from the 15th onwards.
The issue I have is I really need to set the to datepicker to +1 day. So the user could only select 16th onwards.
My skills are not advanced enough to add the date to the parseDate
$(function() {
var dates = $( "#from_date, #to_date" ).datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
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 );
}
});
});
Upvotes: 7
Views: 34083
Reputation: 318182
To limit one datepicker based on the other, one can set the minDate
and maxDate
settings to the date selected in the other datepicker etc.
Something like this
$(function() {
/* global setting */
var datepickersOpt = {
dateFormat: 'dd-mm-yy',
minDate : 0
}
$("#from_date").datepicker($.extend({
onSelect: function() {
var minDate = $(this).datepicker('getDate');
minDate.setDate(minDate.getDate()+2); //add two days
$("#to_date").datepicker( "option", "minDate", minDate);
}
},datepickersOpt));
$("#to_date").datepicker($.extend({
onSelect: function() {
var maxDate = $(this).datepicker('getDate');
maxDate.setDate(maxDate.getDate()-2);
$("#from_date").datepicker( "option", "maxDate", maxDate);
}
},datepickersOpt));
});
Upvotes: 18