How to disable already ordered dates?

Question

I have a hotel reservation form where I have two fields called checkIn and checkOut. I use jQuery datepicker to book rooms here. I do not want to show the dates that are already booked. I 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); } }); }); 

Answer 1

This fiddle should help you, you just need to figure out the array of dates you want to disable

  var array = ["2015-06-14","2015-06-15","2015-06-16"] $('input').datepicker({ beforeShowDay: function(date){ var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [ array.indexOf(string) == -1 ] } }); 

http://jsfiddle.net/CxNNh/2201/

here is the updated jsfiddle that works for me

http://jsfiddle.net/CxNNh/2202/