jQuery UI DatePicker: Disable Specified Days

Discussion

1. Mark

   I have to admit, I wish Mootools came with such a wide variaty of UI plugins…

   All and all, I think you accomplished your goal very well! Good stuff.
2. Salih Gedik

   Nice. But I rarely need jQ. Mootools FTW isn’t it?
3. Simeon

   Nice post! Can be easily expanded by populating he “disabledDays” using PHP to find all weekends, holidays, etc. I wonder what the performance impact is though if you span across several years as a typical selection might allow?
4. Savageman

   @mark: you should try this Mootools DatePicker (also works for time): http://www.monkeyphysics.com/mootools/script/2/datepicker

   Doesn’t have a beforeShowDay option though…
5. Douglas Neiner

   I would remove all the MooTools helpers :) and just use the jQuery native $.inArray function:

   Change this line: ArrayContains(disabledDays,(m+1) + ‘-‘ + d + ‘-‘ + y) to this instead: $.inArray(disabledDays,(m+1) + ‘-‘ + d + ‘-‘ + y) != -1

   Then you don’t need to two other functions from MooTools.
6. Douglas Neiner

   @Douglas Neiner: Sorry, flip the arguments. $.inArray( value, array )
7. David Walsh

   @Douglas Neiner: I’m a complete MooTools nerd — I didn’t even think to check the jQuery API. Will update.
8. Josh Stauffer

   Interesting dilema and solution. My problem with the jQuery Datepicker is figuring out how to store selected start and end dates in a cookie.
9. Brad Zickafoose

   Is it possible to have the DatePicker block out today’s date as well as past dates from being selected, only allowing tomorrow and future dates available for selection?
10. David Walsh

    @Brad Zickafoose: The code above actually automatically disables today and all previous days.
11. Brad Zickafoose

    @David Walsh: oh nice… silly me. :-)
12. James

    Hi,

    This code is nice, very helpful. But I am pretty new to jQuery, in asp.net I use some code to generate the dates in the array but the single digits are formatted with a zero like 01 for January etc. So when my arrays are formatted they use zero and the dates are not being blocked out on the calendar, could anyone advise the best solution so that the code will accept 0x numbers?

    Many thanks.
13. Alex Ho

    Thanks David!

    I built an internal application for my department and I am using the datepicker plugin as well. I don’t think anyone will ever select a day on the weekend. I might as well disable it too.
14. Alex Ho

    Oh wait, apparently there’s already a built-in function for removing weekends!

    Thanks for the script though.
15. Neha

    Hello,

    Really nice plugin! Can we do that same with mootools???
    Any link??

    thanks!!
16. billski

    Thanks for the great plugin. This is the best version of datepicker I found, and I tested many. The blocked dates, and blocked current date are exactly what I needed. It was easy for a beginner like me to implement.
17. nyett

    hi, do you know how to take the national days from MySQL database and disable those days on datepicker?? need your help plssssss
18. Jonathan

    How do you edit this to include the current date?
19. Jonathan

    How do you edit this to include todays date?
20. ajaxgoogle

    Please someone write normal Datepicker as Jquery has in Mootools!
21. Andrew Pokoj

    First off, great script from what I can understand… I just started to teach myself javascript and I can’t seem to to enable the weekends so I can just make a custom array for the two months i need the calendar for (Fri/Sat in Sept, and our operating schedule in Oct this year)

    How would I go about doing this?
22. Boni

    yeah i need to include todays date also.. thanks
23. Boni

    i created a 2nd textbox and now i have 2 ‘#firstDate’ and ‘#endDate’

    i want ‘#endDate’ display dates the same date as #firstDate’ with future dates. Possible? thanks
24. nyett

    @Boni: do you want the EndDate has the same that as FirstDate or the EndDate disable the dates before the firstDate??
25. nyett

    @Boni: do you want the EndDate has the same that as FirstDate or the EndDate disable the dates before the firstDate?? So, the endDate always bigger than the firstDate.
26. Yun

    Wht do i have to do make it to disable dates between “2-21-2010” and “2-24-2010”?
27. mitja.GTI

    Hi,
    all i see is every date disabled in you demo. This i could really use, so i would love you to update this post with a working solution.
    Thanks.
28. mitja.GTI

    Hi,
    all i see is every date disabled in you demo. This i could really use, so i would love you to update this post with a working solution.
    Thanks.
29. Matt

    Maybe I’m just missing something, but why is there a for loop in this code? It seems like you are simply doing the $.inArray multiple times on the same date. Amy I missing something?
30. savita

    Checked the demo it was not working, so just update line #9 with the following code and it is working for me now!!!.

    if($.inArray((m+1) + ‘-‘ + d + ‘-‘ + y,disabledDays) != -1 )
31. Nicole

    Thank you for sharing this, huge time saver!!!
32. Fastenwandern

    Hey David,

    your site is very nice, but when i open the calendar no date is enabled. What shall I do?

    Bye Thomas
33. Séb

    Hello there,

    Nice read.

    I have a question though,

    How can i disable all the day before the current date ?

    Regards, Séb.

• Harish

  Use this:

  minDate: 0

  its more easy and efficient.
• mike

  Seb I wanted the same result – to disable all previous dates but I cant seem to get your version working. Old dates are still selectable using the below:

  function noBefore(date){
  if (date < new Date()){
  return [false];
  }
  return [true];
  }
  
  jQuery(document).ready(function() {
    jQuery('#datepicker').datepicker({
      minDate: new Date(2011, 5, 1),
      dateFormat: 'dd/mm/yy',
      constrainInput: true,
      beforeShowDay: noBefore
    });
  });
  

  @Harish: Wasn't sure what minDate was meant to replace.

  I''m not a coder so I'm just grabbing code here and trying to mesh it together.

• Matt

  Jeremy,

  You are simply telling the object to call noWeekendsOrHolidays before displaying each date. So if you have two date pickers, you are going to have to initializations and you can simply have each initialization call separate functions.

  Hope I didn’t misunderstand the question. Hope that helps.

  Matt

for (i = 0; i  date) {
      //console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
      return [false];
    }
  }

if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
      //console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
      return [false];
    }

• Muhammad Wasim

  Hi Sadaf

  Can you please share your code on fiddle? Looks like your hard work can save my hours. Thanks.

function noBefore(date){
if (date < new Date()){
return [false];
}
return [true];
}

/* create datepicker & timepicker*/
jQuery(document).ready(function() {
  jQuery('#datepicker').datepicker({
    minDate: new Date(2011, 5, 1),
    dateFormat: 'dd/mm/yy',
    constrainInput: true,
    beforeShowDay: noBefore
  });
});

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

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

• chris

  stupid me.. this code works

  function noBefore(date){
  if (date < new Date()){
  return [false];
  }
  return [true];
  }
  
  /* create datepicker & timepicker*/
  jQuery(document).ready(function() {
  jQuery('#datepicker').datepicker({
  minDate: new Date(2011, 5, 1),
  dateFormat: 'dd/mm/yy',
  constrainInput: true,
  beforeShowDay: noBefore
  });
  });
  

$(function() {      
     var disabledDays = ['????????????'];
function disableAllTheseDays(date) {
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    for (i = 0; i < disabledDays.length; i++) {
        if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
            return [false];
        }
    }
    return [true];
}

    $(document).ready(function () {
        $(".Calender").dynDateTime({
            showsTime: true,
            ifFormat: "%Y/%m/%d %H:%M",
            daFormat: "%l;%M %p, %e %m,  %Y",
            align: "BR",
            electric: false,
            singleClick: false,
            displayArea: ".siblings('.dtcDisplayArea')",
            button: ".next()"
        });
    });