Need some help?

I'm usually available for small jobs or problem solving with jQuery or css, at reasonable rates. Just get in touch.

Web Hosting

We recommend Clook for web hosting. UK based, great service and great value.

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.

18 responses to “jQuery UI Datepicker : disabling specific dates”

  1. entozoon says:

    Very useful, thankyou!

  2. hari says:

    Hi
    i am really thankfull to you for puting this online… it helped me a lot…
    🙂

  3. Ian Paolo Viray says:

    this is really great. .!!

  4. Clement Yap says:

    Cool. One more thing, I would like to ask :- How do I refresh datepicker with the recently updated array with no button event automatically?

  5. Simon says:

    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_encode to format the array for jQuery).

  6. Clement Yap says:

    Thanks… It worked.
    Clement

  7. Bhavin says:

    how to disable weekends through in this same function checkbaddates?

  8. Simon says:

    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:

    showdate.getDay() == 6

    You should be able to easily adapt that to check for Saturdays and Sundays.

  9. Rafiq says:

    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

  10. Simon says:

    So the date in the text box is not allowed? Just amend the function checkBadDates to look at the date in the text book.

  11. Dave Hills says:

    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

  12. Simon says:

    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.

  13. al says:

    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

  14. Simon says:

    mydate is the date passed into the function using beforeShowDay. Have a look at the (linked) jQuery UI documentation on this for more info.

  15. al says:

    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?

  16. Simon says:

    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.

  17. Ron says:

    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.

  18. Simon says:

    Ron
    You need to set the minDate option on .datepicker. See here for details.

Useful? Interesting? Leave me a comment

I've yet to find a way of allowing code snippets to be pasted into Wordpress comments - so if you're trying to do this you'd be better off using the contact form.