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.
