Disable specific date in jQuery datepicker

Sometimes we need to restrict users not to select a specific date or date range in jquery datepicker. We can disable a date or date range in jQuery datepicker easily by using minDate or maxDate. Let’s check how to use that in different ways.

How to initialize datepicker?

We can easily initialize datepicker in jQuery. So first take an example code-

<!doctype html>
<html lang="en">
	<head>
		<title>jQuer Datepicker Demo</title>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	</head>
	<body>
 
		<p>Select Date: <input type="text" id="datepicker"></p>
		
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<script>
			$(document).ready(function(){
				$( "#datepicker" ).datepicker();
			});
		</script>
	</body>
</html>

In the above example, we take an input field and gave an id datepicker. In document ready() function initialize it with datepicker(). You can select any date, it may be the previous or next date. Sometimes, we need to disable a specific date dynamically also. So let’s check one by one.

How to disable previous date and future date in jQuery datepicker?

Sometimes we need to restrict the user to choose the previous date or future date. So we can set the minDate option to either ‘today’ or simply set it 0 to restrict to select the previous date.

$( "#datepicker" ).datepicker({
   minDate: 0 //restrict user to choose previous date
});
Disabled previous date

If we want to restrict future dates, then instead of minDate, we have to use maxDate. The value will be the same as before i.e ‘today’ or 0.

Disabled future date
$( "#datepicker" ).datepicker({
   maxDate: 0 //restrict user to choose future date
});

How to disable a specific date or dates in jQuery datepicker?

Now sometimes we need to disable one or more dates. So to do that follow the steps.

  1. Make an array with the dates which you want to disable i.e. var dates = ["01-06-2021", "15-06-2021", "30-06-2021"]; Here we set 1st, 15th and 30th June of 2021.
  2. Now create a function that will check if the date is present in the date array. If yes remove the date from the selection.
  3. Call the function from beforeShowDay option in jQuery datepicker. The beforeShowDay accept a date as a parameter and return an array whether the date can be select or not.

Here is the code-

//make an array of disable dates
var dates = ["01-06-2021", "15-06-2021", "30-06-2021"];

function disableDates(date) {
  var string = $.datepicker.formatDate('dd-mm-yy', date);
  return [dates.indexOf(string) == -1];
}

$("#datepicker").datepicker({
  beforeShowDay: disableDates
});
Disabled specific date

How to restrict a date range in Datepicker?

Suppose we want to restrict a user who can only select next and previous 5 days from today . So we need to use both minDate and maxDate.

$("#datepicker").datepicker({
   minDate: -5,
   maxDate: "+5D"
});

How to disable weekends and specific dates in jQuery datepicker?

Sometimes we need to show only the working day i.e. except Sunday and Saturday or we have to disabled specific holiday. To disable specific days, I have already discussed earlier. But if we need only weekends or both holidays and weekends, then how to do that?

Below is an example of disabling weekends. In this code, we take a date from datepicker and convert it to the date format. Now by using the getDay() function, check if the day is 0 (Sunday) or 6 (Saturday).

 function disableHoliday(date) {
    var string = $.datepicker.formatDate('yy-mm-dd', date);
          
    var filterDate = new Date(string);
    var day = filterDate.getDay();
    return [day != 0 && day !=6]
 }
        
 $( "#datepicker" ).datepicker({
    beforeShowDay: disableHoliday
 });

Datepicker has an inbuilt function to disabled weekends. So we don’t have to use the long code above. We can use noWeekends function to disable the date like below.

$( "#datepicker" ).datepicker({
  beforeShowDay: $.datepicker.noWeekends
});

To disable both holidays and weekends we can use the below code-

var holiDays = ["2021-06-17"]; //suppose 17th june is holiday, we can also add others holidays 
function disableHoliday(date) {
    var string = $.datepicker.formatDate('yy-mm-dd', date);
          
    var filterDate = new Date(string);
    var day = filterDate.getDay();
    var isHoliday = ($.inArray(string, holiDays) != -1);
    
    return [day != 0 && day !=6 && !isHoliday]
 }
        
 $( "#datepicker" ).datepicker({
    beforeShowDay: disableHoliday
 });
Weekend and others holidays

About Ashis Biswas

A web developer who has a love for creativity and enjoys experimenting with the various techniques in both web designing and web development. If you would like to be kept up to date with his post, you can follow him.

Leave a Comment