I am having a form for booking hotel rooms where in I am having two fields called checkIn and checkOut. I am using jQuery datepicker for booking rooms here I don't want to show those dates which are already booked. I have tried like this.
$(function() {
var excludedCheckInDates = CHECKINDATES; // an array of already booked checkin dates
var excludedCheckOutDates = CHECKOUTDATES; // an array of already booked checkout dates
$.datepicker
.setDefaults({
defaultDate: '+1w',
changeMonth: true,
changeYear: true,
minDate: 0,
beforeShowDay: function(date) {
date = $.datepicker.formatDate('yy-mm-dd', date);
excludedCheckInDates = $.inArray(date,
excludedCheckInDates) < 0;
excludedCheckOutDates = $.inArray(date,
excludedCheckOutDates) < 0;
if (excludedCheckInDates) {
return [true, 'selectedDate'];
} else {
return false;
}
if (excludedCheckOutDates) {
return true;
} else {
return false;
}
return true;
}
});
$('#checkIn').datepicker({
onSelect: function(selectedDate) {
$('#checkIn').datepicker('option', 'minDate',
selectedDate || 0);
}
});
$('#checkOut').datepicker({
onSelect: function(selectedDate) {
$('#checkOut').datepicker('option', 'maxDate', selectedDate);
}
});
});
This fiddle should help you, you just need to figure out the array of dates you want to disable
http://jsfiddle.net/CxNNh/2201/
here is the updated jsfiddle that works for me
http://jsfiddle.net/CxNNh/2202/