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.
CONTENTS
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
});
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.
$( "#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.
- 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. - Now create a function that will check if the date is present in the date array. If yes, remove the date from the selection.
- 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 selected 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
});
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 restrict more then one date range in jQuery datepicker?
Suppose you want to restrict multiple date ranges. You can do it by using the below code.
$(document).ready(function(){
var date_range = [ ["11-04-2021", "11-08-2021"], ["11-11-2021", "11-14-2021"], ["11-21-2021", "12-02-2021"] ];
$( "#datepicker" ).datepicker({
beforeShowDay: function(date) {
var string = $.datepicker.formatDate('mm-dd-yy', date);
for (var i = 0; i < date_range.length; i++) {
if (Array.isArray(date_range[i])) {
var from = new Date(date_range[i][0]);
var to = new Date(date_range[i][1]);
var current = new Date(string);
if (current >= from && current <= to) return false;
}
}
return [date_range.indexOf(string) == -1]
}
});
});
You need to enter date range like this [ ["11-04-2021", "11-08-2021"], ["11-11-2021", "11-14-2021"], ["11-21-2021", "12-02-2021"] ]. Also, keep in mind, use mm/dd/yy format.
How to disable weekends and specific dates in jQuery datepicker?
Sometimes we need to disable days of a week i.e. except Sunday and Saturday or we have to disable specific holidays. 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 datepicker disable 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
});
jQuery datepicker disable dates before specific date:
Suppose you have a special event that will be starting from 4th November. Users will be able to register there once the event starts. So the user will not be able to select the dates before the specific date i.e. November 4.
So we need to restrict the user to select the date before November 4. Here is the code below:
$( "#datepicker" ).datepicker({
dateFormat: "dd-mm-yy",
minDate: "04-11-2021"
});
In the above example, you can see the jQuery datepicker minDate accept any valid date and disable the days before the specified date in minDate option.
Disable dates based on custom requirements:
Someone emailed me to customize his datepicker. Let’s check his requirement first.
“Hi if you see this, am trying to customize my date picker in this manner: the next 2 days from now are enabled after which the next 11 days are disabled with the days after being enabled ie let’s say today is 9th the date picker will enable 9th,10th and 11th after which the next 11 days are disabled i.e 12th – 22nd are disabled after which the days from 23rd are enabled. I know it sounds confusing but if this is achievable please let me know. kind regards”
So let’s check the code:
$(document).ready(function(){
var dC = 0;
var startCounter = false;
$( "#datepicker" ).datepicker({
minDate: 0,
beforeShowDay: disableDate
});
function disableDate(date) {
var string = $.datepicker.formatDate('yy-mm-dd', date);
var filterDate = new Date(string);
var day = filterDate.getDate();
var currentDate = new Date();
var currentDay = currentDate.getDate();
if( currentDay == day){
startCounter = true;
}
if( startCounter){
dC++;
if( dC >= 4 && dC <= 14){
return [false];
}
}
return[true];
}
});
Hi
This is a very nice tutorial. 🙂
Concering the restriction of a date range in Datepicker, is there a way to restrict more then one date range? From 04-11-2021 to 08-11-2021, from 11-11-2021 to 14-11-2021, from 21-11-2021 to 02-12-2021 for example. So “ad random date ranges”. I suppose you can’t do this with minDate and maxDate.
Best,
Wieland
I have updated my post. You will get the exact code to do this.
To disable weekends and holidays ..but the result is not coming same like the one posted above. It is disabling sunday and monday.
jQuer Datepicker Demo
Select Date:
var holiDays = [“2021-11-11″,”2021-11-01”, “2021-12-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
});
nice
Hi,
This is currently my jqery code for date picker and have attempted to block out future date range from 12/24/21 – 01/04/22 though have not been successful in doing so.
Any assistance would be appreciated
{{ ‘//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css’ | stylesheet_tag }}
Pick a delivery date. Same-day delivery on orders placed before 10 am
$(document).ready( function() {
$(function() {
$(“#date”).datepicker( {
firstDay: 1,
minDate: +0,
maxDate: ‘+2M’,
dateFormat: ‘DD d MM yy’ ,
beforeShowDay: $.datepicker.noWeekends,
beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
if(hour>=10){
$(this).datepicker( “option”, “minDate”, “+1″ );
}
} } );
});
$(‘input[name=”checkout”], input[name=”goto_pp”], input[name=”goto_gc”]’).click(function() {
if ($(‘#date’).val() == “” || $(‘#date’).val() === undefined)
{
alert(“You must pick a delivery date”);
return false;
} else {
//$(this).submit();
return true;
}
});
});
Hi there,
I am extremely new in coding. I paste this code but it doesn’t work. Where should i paste this code? I might have pasted it in a wrong place.
I want to block certain dates (12/17/21-12/18/21-12/19/21) on my date picker.
Thank you so much for your help in advance, really appreciated.
Remy
first add jquery and jquery ui before
</body>tag. You can use CDN also. after adding both scripts paste the below codeHi.
nice tutorial. I’m wondering if is it possible to get all holidays data from specific country from public google calendar using api and disable all holidays in the jquery datepicker?
Thank you
I want to disable it next year. No one can select next year’s date in calendar.
Hello, i need to configure like this.
I selected specific date range, after that i want to remove some of dates which any thing (weekend, normal day, holiday, or something else). is it possible via on click date??