In my last post I talked about how you can disable past dates in Jquery datepicker. In this post I will discuss various methods for disabling dates in Jquery Datepicker.
More specifically I will be covering following cases
- How to Disable Weekends
- How to Disable Specific Dates
- How to Disable Weekends + Specific dates
- How to Disable Week Days Or Only Enable Weekends
- How to Disable a particular day every week.
We will be utilizing the beforeshowday function throughout this tutorial.
This function take date as parameter and is called for each day in the datepicker before it is displayed. So if it returns false then the corresponding date is marked as disabled. One can also dynamically add custom css classes to style the disabled dates. Here is the link to official documentation.
Lets start 
1. How to Disable Weekends
We will use the inbuilt noWeekends function to disable the weekend selection. The noWeekends function returns an array with first value being true / false . So in case a date is a weekend, the function will return false and the particular date will be disabled
This piece of code makes sure that all weekends are disabled.
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: $.datepicker.noWeekends
});
});
2. How to Disable Specific Dates
In order to disable specific dates, we need to create a custom function. Our function will compare all the dates with an array of disabled dates.
So if a date is in disabled dates array our function will simply return false. Here is the code snippet. The code is heavily commented and will help you in understanding.
<script>
/** Days to be disabled as an array */
var disableddates = ["12-3-2014", "12-11-2014", "12-25-2014", "12-20-2014"];
function DisableSpecificDates(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
// First convert the date in to the mm-dd-yyyy format
// Take note that we will increment the month count by 1
var currentdate = (m + 1) + '-' + d + '-' + y ;
// We will now check if the date belongs to disableddates array
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1 ) {
return [false];
}
}
}
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: DisableSpecificDates
});
});
</script>
The inArray() method returns -1 if it cannot find a match. Here is the official documentation
3. How to Disable Weekends in addition to Specific Dates
In this case we will insert an additional check for weekends. We will again make use of the inbuilt noWeekends function. Refer to the following code snippet
<script>
/** Days to be disabled as an array */
var disableddates = ["12-3-2014", "12-11-2014", "12-25-2014", "12-20-2014"];
function DisableSpecificDates(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
// First convert the date in to the mm-dd-yyyy format
// Take note that we will increment the month count by 1
var currentdate = (m + 1) + '-' + d + '-' + y ;
// We will now check if the date belongs to disableddates array
for (var i = 0; i < disableddates.length; i++) {
// Now check if the current date is in disabled dates array.
if ($.inArray(currentdate, disableddates) != -1 ) {
return [false];
}
}
// In case the date is not present in disabled array, we will now check if it is a weekend.
// We will use the noWeekends function
var weekenddate = $.datepicker.noWeekends(date);
return weekenddate;
}
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: DisableSpecificDates
});
});
</script>
4. How to Disable Weekdays
In order to disable weekdays, we will again utilize the noWeekends function. We will write a custom function which will return True in case of a Weekend and False in case of a Weekday. So basically we are inverting the response of the noWeekends Function.
Take note that the noWeekends function returns an array, with first value being true/false, so we will invert the first value. Refer to the Following snippet:
<script>
function DisableWeekDays(date) {
var weekenddate = $.datepicker.noWeekends(date);
// In order to disable weekdays, we will invert the value returned by noWeekends functions.
// noWeekends return an array with the first element being true/false.. So we will invert the first element
var disableweek = [!weekenddate[0]];
return disableweek;
}
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: DisableWeekDays
});
});
</script>
5. How to Disable a particular day every week
So what if your want to disable every Monday or Every Wednesday? In this case we will make use of getDay () function. This functions return an integer which corresponds to a day of the week. For example:
0 is Sunday, 1 is Monday, 2 is Tuesday , 3 is Wednesday, 4 is Thursday, 5 is Friday and 6 is Saturday.
Here is the snippet
<script>
function DisableMonday(date) {
var day = date.getDay();
// If day == 1 then it is MOnday
if (day == 1) {
return [false] ;
} else {
return [true] ;
}
}
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: DisableMonday
});
});
</script>
One can also use this method to disable only Sundays or Saturdays.
Conclusion
The Jquery datepicker is very simple and very powerful. Once you get the hang of the API, you can literally make it sing :-). I hope you liked the tutorial. In futurepost I will cover more Jquery related tutorials.
In case you are interested in wordpress related tutorial, check out TheWpHosting
I have recently started a project Free Website Builders . Here we cover topics like , Building a Website and Website Builders.
We are hiring multiple javascript developers. Contact us via the contact form here
About Ankit
Im getting Uncaught ReferenceError: $ is not defined
Any ideas… thanks.
Make sure to include the jquery library
How to Disable Today/Current Dates in Jquery DatePicker
minDate: 1
hi. i have used a data picker from bootstrap. I was wondering how would you block dates within a certain range.
for example the user chooses 10th April 2015. That user can only select dates from 10th April 2015 – 19th April 2015 which would be the ending date. So the user can only select 10 days from the selected day chosen.
the code i have used is
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$(function () {
$(‘#startdate’).datetimepicker({
minDate:today,
format: ‘YYYY-MM-DD HH:MM:SS’
}).change(function (selected) {
var startDate = new Date(selected.date.valueOf());
$(‘#enddate’).datetimepicker(‘maxDate’, startDate+10);
});
$(‘#enddate’).datetimepicker({
minDate:today,
format: ‘YYYY-MM-DD HH:MM:SS’
});
});
There is another short and sweet solution to disable a custom day in week eg:disable friday,
beforeShowDay: function(date) {
var weekend = date.getDay() == 5;
return [!weekend, weekend ? ‘myweekend’ : ”];
$(‘input’).blur();
}
i hv to disable date after 24th of every month in the date picker..how can l write a code for that…any one help me plz…thanks..
function DisableAfter24( date){
return [(date.getDate() < 25)] ;
}
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: DisableAfter24
});
});
This guide is really awesome, neatly explained and so elegant.
Thank you so much.
good article thanks
Hi, This is really great post. Thank you so much. Keep it up.
hi, one correction in “DisableSpecificDates” function at the end of function you should add “return[true];” else jquery datepicker library will throw undefined of zero, this is because function is returning if match found else its not.
Just make sure you always have an
else { return [true] ; }
in your disable function, like in the “How to Disable a particular day every week” example. Took me some time to sort out why my script wasn’t working at first.
Excellent post though, thanks a lot!
Oh, sorry Shoib Mohammed, just saw that you came out first with this observation, the credit goes to you ;>)
Hi there,
I would like to add in the code that disables a specific day each week. Can you tell me where the following code goes? I tried adding it to my functions.php file but it caused a syntax error.
function DisableMonday(date) {
var day = date.getDay();
// If day == 1 then it is MOnday
if (day == 1) {
return [false] ;
} else {
return [true] ;
}
}
$(function() {
$( “#datepicker” ).datepicker({
beforeShowDay: DisableMonday
});
});
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
$(‘.choosedate’).datepicker({
beforeShowDay: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
},
weekStart: 1,
todayHighlight:true,
format:'dd/mm/yyyy'
});
A really helpful tutorial. Saved me hours of work – thanks so much.
how about disabling next week and beyond , im using the code below to get the current week.
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1);
return Math.ceil((((this – onejan) / 86400000) + onejan.getDay()+1)/7);
} t
is there any way to disable next month’s specific date?
Great article.
There is just a logic mistake in the DisableSpecificDates function. You loop on the disabled dates array, and call each time $.inArray which is pointless… either you remove the for loop on the disabled dates array and keep just $.inArray or you keep the for-loop but then you do a value check of the i-th date instead of calling $.inArray there…
Thanks a lot!
I’m high school student and studying web design and development(web programming) now.
I found your article, and your article help me understanding.
I think ‘beforeShowDay’ in jquery is very difficult for me…
Thank you. Have a nice day!
Hi,
I am using a datetime picker specifically (http://www.jqueryscript.net/time-clock/jQuery-Date-Time-Picke-Plugin-Simple-Datetimepicker.html)
I have gotten the hang of pretty much everything, but I cant for the life of me figure out if there is a way to choose a different time range based on day. I know there is nothing I can do out of the box, at least I dont think, but I am at a loss.
i.e. Monday-Friday 8am-8pm and Sat-Sun 9am-7pm.
I can disable certain days, days of the week, limit time, etc… just cant get the time to be dependent on the day of the week selected.
Any advice would be Very greatly appreciated!
how to disable only Monday and Tuesday?
Hello friends. I am new at this forum. I am working with a website and I need to apply disable date to a datepicker. I have the following code:
var disabled_Days = [“4-19-2016″, “4-28-2016″, “5-1-2016″, “5-10-2016″];
$(‘input[name=”date”]’).datepicker({
startDate: tour_start_date,
0 ) : ?>
endDate: tour_end_date,
beforeShowDay: function(date) {
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
for (i = 0; i < disabled_Days.length; i++) {
if($.inArray((m+1) + '-' + d + '-' + y,disabled_Days) != -1) {
console.log("bad: " + (m+1) + "/" + d + "/" + y + " / " + disabled_Days[i]);
return [false];
}
}
console.log("good: " + (m+1) + "/" + d + "/" + y);
return [true];
}
});
I think the code is good, should work fine but I don´t know why is not working.
Any thoughts, suggestions?
Is possible to remove the dayNames?
I have a requirement where I don’t want to display the “Su”, “Mo”, “Tu”, “We”, “Th”, “Fr”, “Sa” in my jQuery calendar.
Hi I want to restrict the date from today to next 2 months, Can you please tell me how to do that?
I have restricted past dates using “minDate: 0″ but I am not able to restrict future dates.
TIA
Hi,
Contact Form 7 + Contact Form 7 Datepicker : I installed
Where we are adding code to turn off the weekend?
how to disable days before monday latest from today.
means if today is wednesday then user can select the date from next monday not before that.
How can I disable a particular day in all months. For example, I need to disable the second Tuesday in each month.
Hi how can i hide alternative dates..?
How to disable the dates after the current date.
Where do I put these codes?
Hello,
great explanation, however, it doesn’t seem to work with the existing script in place. I am trying to do your number 5 and disable Mondays and Tuesdays.
Here is the original script:
jQuery(‘.pp_date’).datepicker({
dateFormat:’dd/mm/yy’,
numberOfMonths: 1,
onSelect: function(){
var myDate = new Date(this.value);
var myDateRaw = myDate.setDate(myDate.getDate());
jQuery(‘#’+jQuery(this).attr(‘id’)+’_raw’).attr(‘value’, myDateRaw);
}
});
Where do I add:
function DisableMonday(date) {
var day = date.getDay();
if (day == 1) {
return [false] ;
} else {
return [true] ;
}
}
$(function() {
$( “#datepicker” ).datepicker({
beforeShowDay: DisableMonday
});
});
?????? Thanks a lot
var disableddates = [“12-3-2016″, “12-11-2016″, “12-25-2016″, “12-20-2016″];
function DisableSpecificDates(date)
{
var m = date.getMonth();
var d = date.getDate();
var y = date.getFullYear();
var currentdate = (m + 1) + ‘-‘ + d + ‘-‘ + y ;
for (var i = 0; i < disableddates.length; i++)
{
if ($.inArray(currentdate, disableddates) != -1 )
{
return [false];
}
else
//ADD THIS LINE TO DISABLE SPECIFIC DATES
{
return [true];
}
}
}
$(function() {
$( "#datepicker" ).datepicker({
beforeShowDay: DisableSpecificDates
});
});
hi please guys help am try to disable two days after current date and i have tried using maxDate : -2 and maxDate : 2 its doesn’t work for me.
javascript
$(function () {
Hi
I would like to select every 2nd en 4th Sunday of the month.
And only between months March till October.
Could you provide me the code please?
Thanks a lot.
Hi
how can i do this in datepicker if i need to disable the dates between some period of dates , for example from November 16 until December 15th.
thanks
Hi,
I want to disable alternate tuesday so please suggest me
i wanted to disable only coming sunday(only first coming sunday from todays date)
Im using jquery datepicker. I want to disable previous dates based on the fetched date value from the DB. can some one you help me regarding this.
Hi
Where should I put this code?
Enabled a range of days and disabled the rest of the year, how to do?
Hi,
The point 2. (2. How to Disable Specific Dates )
is not working.
Can you help me. please?
it’s not working
Hello,
I want to exclude Monday and Tuesday with option 5. I’m using contact form 7 with datepicker. Which code do I use and where do I put this code?
I posted this code and it works fine. Enables the date 5 days from today and disables Fri.
Query(function(){
var $j = jQuery.noConflict();
$j(“input[id$=inputTRStartDate]”).datepicker({
changeYear: true,
changeMonth: true,
dateFormat: “mm/dd/yy”,
minDate: +5,
beforeShowDay: function(date) {
var day = date.getDay();
return [(day != 5)];
}
});
});
But I want to disable the weekends also. Tried your disable function but not working.
I am using :
Thoughts?
HOW TO DISABLE ALL DATE AND customizely ENABLE DATES
How to disable next weeks in datepicker
Hi Guys,
I want to disable Sundays.
What code do I need and where exactly do I put it in WordPress?
Thanks
Tony
i want set the date range with custom block date. demo here https://jsfiddle.net/92rxyoa4/3/
Now i would like to restrict user to select date range which does not include the blockout date.
here in this example , user can not select 22nd mar to 26th mar because 24th mar and 25th mar are blocked.
please advise.
Thank you
How to disable the dates after current week?
I have array of string in date format need to disable single or multiple dates in row or alternate need to disable I am able to do at starting load page it’s highlighting but ones mouse over on that getting enable color also changing selected date getting color highlighting and also it’s not working for future dates.please give me code for that