Hide/ Disable Dates in jQuery UI Datepicker

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:

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, '', ''];
        }
    });
});
Live Demo
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..