jQuery UI Datepicker : disabling specific dates
Here’s another demo of the jQuery UI Datepicker plugin, here disabling specific dates. This is actually pretty straightforward. Here’s the basic javascript:
$(function() {
$( "#pickdate" ).datepicker({
dateFormat: 'dd MM yy',
beforeShowDay: checkBadDates
});
}
So here I’m just setting the date format and using the beforeShowDay event to call a function to check if any of the dates should be disabled:
var $myBadDates = new Array("10 October 2010","21 November 2010","12 December 2010","13 January 2011","14 February 2011","15 March 2011");
function checkBadDates(mydate){
var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('dd MM yy', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}
Here I'm just populating a local array with my list of excluded dates, but this could esasily be populated from a database lookup, for example. My checkBadDates function is passed each date of the month to be displayed, with the date automatically passed as the argument by datepicker. My function sets some initial values, and then searches the array for a matched bad date - and if found amends the return values appropriately. Note I have to set the format of the date to be checked again so it matches that of my array - it doesn't use the date format I've set earlier.
And really, that's all there is to it. Here's a demo - I've used the class returned by the checkBadDate function to set a green/red background colour for available/unavailable dates. Tested in IE6, IE7, IE8, Firefox3, Chrome, Opera 9, Opera 10 and Safari 4, all on Win/XP, and Safari 5 on Mac OS X/Snow Leopard. View the source to see the css and html. Feel free to leave comments, questions and suggestions for improvement below.
I have another, more complex, demo here which restricts the use to selecting weeks only.
Ron
You need to set the
minDateoption on .datepicker. See here for details.Please show me how to permanently disable the first two days from whatever the current date is. On website, reservations can’t be made within two days of form sign up. I also need to be able to disable specific dates in future, if we’re overbooked. Thank you.
beforeShowDay will run for each date before it’s displayed – so it will run for each day in the first month, and then again for each day if the month is changed. On my demo there are disabled dates in November and December.
Addendum: you say, “the date passed into the function”, but again, what date? I know the function beforeShowDay I read its syntax and options, but the key is: what dates actually mydate contains, where do they come from? from the current display of the current calendar month? will that explain why the dates of October ( a month that is still not the current month) are not being marked in red?
mydate is the date passed into the function using beforeShowDay. Have a look at the (linked) jQuery UI documentation on this for more info.
what is mydate equal to? You have not declared or defined it anywhere before. I am only getting marked as booked the days for present month but not for the other months, I get september but not October
Dave
Yes, you can add a third argument to your checkBadDates function to return a tooltip. I’ve added it to my example here – see July example.
Ref: jQuery UI Datepicker : disabling specific dates
Dear Simon,
I recently added this to my website but haven’t uploaded it to a server yet. It all works ok, however is there a way to add a tooltip so that a hover shows ‘available’ or ‘unavailable’. The js used is
var $myBadDates = new Array(“10 October 2010″,”21 November 2010″,”12 December 2010″,”13 January 2011″,”14 February 2011″,”15 March 2011″);
function checkBadDates(mydate){
var $return=true;
var $returnclass =”available”;
$checkdate = $.datepicker.formatDate(‘dd MM yy’, mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];
}
Many thanks
Dave Hills
So the date in the text box is not allowed? Just amend the function
checkBadDatesto look at the date in the text book.i need to disable date from certain dates for eg. today date is 21/04/2015. but i need disable a date from text box. textbox cantains 03/04/2015. please help on this
Have a look at this page, and the function defined part way down called
checkAvailability(). That restricts checked dates to Saturdays only using a check:You should be able to easily adapt that to check for Saturdays and Sundays.
how to disable weekends through in this same function checkbaddates?
Thanks… It worked.
Clement
I the example I’ve shown the ‘bad dates’ array just hard coded into the jQuery. In a real life scenario you’d probably be storing these in your database, so instead you can retrieve them from your database when the page is called and use them to populate the array (use
json_encodeto format the array for jQuery).Cool. One more thing, I would like to ask :- How do I refresh datepicker with the recently updated array with no button event automatically?
this is really great. .!!
Hi
i am really thankfull to you for puting this online… it helped me a lot…
🙂
Very useful, thankyou!