I am taking 4 datepicker calendar,and i want to disable the dates of previous selected date.. I got some idea from JQuery date picker but its fine for 2 date pickers but i have to use 4 datepickers. So if any one has Solution just share with me.. For two date picker this is the code:
$(function() {
var dates = $( "#txt1, #txt2" ).datepicker({
minDate:0,
maxDate:"+1Y",
defaultDate: "+1w",
dateFormat:'dd-mm-yy',
numberOfMonths: 3,
onSelect: function( selectedDate ) {
var option = this.id == "txt1" ? "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 );
}
});
});
If your text inputs have ids
of txt1
through txt4
then something simple like this would work:
onSelect: function(date) {
for(var i = 0; i < dates.length; ++i) {
if(dates[i].id < this.id)
$(dates[i]).datepicker('option', 'maxDate', date);
else if(dates[i].id > this.id)
$(dates[i]).datepicker('option', 'minDate', date);
}
}
Demo: http://jsfiddle.net/ambiguous/Rtbph/
An alternative that doesn't require your id
attributes to compare nicely would use index
thusly:
var dates = $('#first, #second, #third, #fourth').datepicker({
// ...
onSelect: function(date) {
var me = dates.index(this);
for(var i = 0; i < dates.length; ++i) {
if(i < me)
$(dates[i]).datepicker('option', 'maxDate', date);
else if(i > me)
$(dates[i]).datepicker('option', 'minDate', date);
}
}
});
Then you'd just have to make sure that your initial selector, $('#first, #second, #third, #fourth')
, put the inputs in the proper left to right order.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.