How To Disable Dates In A datepicker Using jQuery

You are currently viewing How To Disable Dates In A datepicker Using jQuery
  • Post author:
  • Post category:Guides
  • Reading time:1 mins read

Before you start using jQuery, you need to include jQuery, jQuery UI jQuery UI CSS sources in the <script> element of your HTML document.
Follow the code snippets below. It demonstrates a simple example to disable dates in a datepicker. We will be using the function beforeShowDay for disabling the dates. Let’s see how to disable dates in a datepicker using jQuery.

1. Add a text box for implementing the datepicker.

<input type="text" value="Select Date" />

2. Create an array of dates you need to be disabled.

var datesToDisable = ["2015-11-22", "2015-11-30"]

3. Load the datepicker to the text box.

$('input').datepicker(
{
beforeShowDay: function(date)
{
var str = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [datesToDisable.indexOf(str) == -1]
}
});

The function beforeShowDay returns false if it finds the dates in the variable datesToDisable.

I hope it was helpful. Please share your comments with us.