jQuery UI Datepicker - Disabling specific dates

JavaScript
1

Hi

I am using the jQuery UI Datepicker - Event Search.

I want to disable specific dates only. For example, I want to disable the following dates only:


10th Oct 2010
21st Oct 2010
12th Nov 2010

I searched in google and found one page which promised to deliver what I was looking for. But unfortunately it does not seem to work. If you look into its demo, it has disabled ALL dates.

So, has anyone worked on this before, can anyone help me please?

Thanks

2

When you initialize the datepicker you can supply it callback function called beforeShowDay that takes a date as parameter and you can return an array with options you want for that day (one if these options indicates whether or not you want the date to be selectable).
For more info see the tab “Events” on this page: http://jqueryui.com/demos/datepicker/#event-beforeShowDay

AFAIK there is no way to supply an array of dates that should not be selectable directly.

3

I read that already, could not figure out how to implement it.

Can you show me an example please on how to do this?

Thanks

4

Sure. For your example dates it would be something like:

$(element).datepicker({
  // .. settings you already have go here ..
  beforeShowDate: function(date) {
      if (date.toDateString()===new Date(2010,9,10).toDateString()) {
         return [false,""]; // Don't show 10th Oct 2010
      }
      if (date.toDateString()===new Date(2010,9,21).toDateString()) {
         return [false,""]; // Don't show 21st Oct 2010
      }
      if (date.toDateString()===new Date(2010,10,12).toDateString()) {
         return [false,""]; // Dont show 12th Nov 2010
      }
      return [true,""];
  }
});

The format for new Date is <year>,<month>,<day> where you need to set month 1 lower than it actually is. January is 0, …, December is 11

HTH :slight_smile:

5

Can I have those dates merged to a single array?

Like

var badDates = Array(‘2010-10-23’,‘2010-10-12’);

Thanks

6

So no.
You could write the beforeShowDate function such that you can put an array in there, but I’ll leave that as an exercise for you :slight_smile:

7

So is there anyway to disable a date range?

For example, I want to disable all dates between and including

2010-10-23 to 2010-10-29

Thanks again for your help.

8

No. The only thing you can set is a date before which everything should be disabled (minDate) or a date after which everything should be disabled (maxDate).

For everything other than that you need the beforeShowDate callback.