Learning jQuery

In this post, find jQuery code to hide or disable specific dates in jQuery UI Datepicker. This is small but useful features. Consider a scenario, where hide all the dates for public holidays or workplace is closed.

Related Post:

• Disable specific days in jQuery Datepicker
• Disable Weekends in jQuery DatePicker
• Enable only weekends in jQuery Datepicker

First, create an array of dates which should be disabled. In the below jQuery code, you will see the array index value is also a date object and the value is also a date object.

  var arrDisabledDates = {};
  arrDisabledDates[new Date('03/22/2013')] = new Date('03/22/2013');
  arrDisabledDates[new Date('04/04/2013')] = new Date('04/04/2013');
  arrDisabledDates[new Date('05/16/2013')] = new Date('05/16/2013');
  arrDisabledDates[new Date('06/30/2013')] = new Date('06/30/2013');

Now, the DatePicker control provide "beforeShowDay" event, which gets called before building the control. So use this event to disable the date. If the calendar date is found in our defined array then disable it otherwise don't do anything.

$('#txtDate').datepicker({
   beforeShowDay: function (dt) {
       var bDisable = arrDisabledDates[dt];
       if (bDisable) 
          return [false, '', ''];
       else 
          return [true, '', ''];
   }
});

So the complete jQuery code is,

$(document).ready(function () {
    var arrDisabledDates = {};
    arrDisabledDates[new Date('03/22/2013')] = new Date('03/22/2013');
    arrDisabledDates[new Date('04/04/2013')] = new Date('04/04/2013');
    arrDisabledDates[new Date('05/16/2013')] = new Date('05/16/2013');
    arrDisabledDates[new Date('06/30/2013')] = new Date('06/30/2013');

    $('#txtDate').datepicker({
        beforeShowDay: function (dt) {
            var bDisable = arrDisabledDates[dt];
            if (bDisable) 
               return [false, '', ''];
            else 
               return [true, '', ''];
        }
    });
});

Feel free to contact me for any help related to jQuery, I will gladly help you.