jQuery UI Datepicker - Disable specific days

Question

Is there any (easy) way to set the jQuery UI Datepicker to disallow selection of specific, predetermined days?

I was able to get this approach working, however, it produces a null error which prevents it from displaying in IE.

'natDays[...].0' is null or not an object

Thanks in advance!

UPDATE: Might help if I included some code, right? Anyway, most of this was taken straight from the aforementioned thread:

natDays = [
        [7, 23], [7, 24], [8, 13], [8, 14], 
    ];

    function nationalDays(date) {
        for (i = 0; i < natDays.length; i++) {
            if (date.getMonth() == natDays[i][0] - 1
            && date.getDate() == natDays[i][1]) {
                return [false, natDays[i][2] + '_day'];
            }
        }
        return [true, ''];
    }

    function noWeekendsOrHolidays(date) {
        var noWeekend = $.datepicker.noWeekends(date);
        if (noWeekend[0]) {
            return nationalDays(date);
        } else {
            return noWeekend;
        }
    }


    $(function() { 
        $("#datepicker").datepicker({
            inline: true,
            minDate: new Date(2009, 6, 6), 
            maxDate: new Date(2009, 7, 14), 
            numberOfMonths: 2, 
            hideIfNoPrevNext: true,
            beforeShowDay: $.datepicker.noWeekends,
            altField: '#alternate',
        }); 
    });

Thanks again!

could you paste your code of what you have thats producing the error — TStamper, Mar 24 '09 at 15:43

score 15 · Answer 1 · edited Aug 24 '16 at 13:52

15

Here is a way to disable specific dates from being selected:

var unavailableDates = ["9-5-2011","14-5-2011","15-5-2011"];

function unavailable(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, unavailableDates) < 0) {
    return [true,"","Book Now"];
  } else {
    return [false,"","Booked Out"];
  }
}

$('#iDate').datepicker({ beforeShowDay: unavailable });

Source: jQuery - Datepicker - Disable Specific Dates

edited Aug 24 '16 at 13:52

DarkBee

16,592
6
46
58

answered May 06 '11 at 06:36

Tokes

181
1
3

Just a note - this is the D-M-Y format of date. To use M-D-Y, change dmy to (date.getMonth()+1) + "-" + date.getDate() + "-" + date.getFullYear(); – Scott C Wilson Jun 30 '23 at 21:17

Alex K · Answer 2 · 2014-12-18T19:15:39.883

You can use the beforeShowDay option. I needed to disable any day past the 28th of the month. Here is my code.

$('.datepicker').datepicker({
    dateFormat: "yy-mm-dd",
    beforeShowDay: function(date) {
        var day = date.getDate();
        if (day > 28) {
            return [false];
        } else {
            return [true];
        }
    }
});

Here is more information about it: http://api.jqueryui.com/datepicker/#option-beforeShowDay

The date variable passed into the beforeShowDay callback is a JavaScript date object, so it can be formatted using various libraries, a timestamp can be retrieved using date.getTime(), etc.

@WHK I'm sorry but I don't understand your question. – Alex K May 28 '14 at 19:13 — Alex K, May 28 '14 at 19:13

Chris Haines · Accepted Answer · 2009-03-25T17:33:01.887

9

Have you tried declaring natDays properly with the 'var' keyword in front?

Also - you have an extra comma at the end of your natDays definition.

natDays[i][2] won't work as your the arrays only have 2 items in them - try just ''

Additionally, you'll want to set your beforeShowDay function name correctly - doesn't look like it's even calling your custom function

edited Mar 25 '09 at 17:33

answered Mar 25 '09 at 17:21

Chris Haines

6,445
5
49
62

Hmm... just tried it. No luck. This is the error that IE is returning: 'natDays[...].0' is null or not an object – Sam Mar 25 '09 at 17:32
See my recent edit... it's not defined properly (extra comma) – Chris Haines Mar 25 '09 at 17:33
Okay... I think we're getting somewhere! The extra comma fixed things in IE8. Can you show me what you mean with your second comment though? (I'm a JS novice... can you tell?) Thank you! – Sam Mar 25 '09 at 17:49

score 1 · Answer 4 · edited Apr 17 '12 at 15:12

1

The problem with IE is most probably on the following line:

altField: '#alternate',
});

Try to remove the comma symbol and it should work.

edited Apr 17 '12 at 15:12

Sergey Glotov

20,200
11
84
98

answered Apr 17 '12 at 09:12

Lukas Celovsky

11
1

score 1 · Answer 5 · edited Mar 10 '11 at 03:19

1

beforeShowDay: $.datepicker.noWeekends,

will be

beforeShowDay: noWeekendsOrHolidays,

edited Mar 10 '11 at 03:19

yhw42

3,334
2
27
24

answered Apr 30 '10 at 00:43

allen

19
1

score 0 · Answer 6 · answered Aug 14 '14 at 22:35

0

 var unavailableDates = ["19-8-2014","14-9-2014"];

 function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" +date.getFullYear();
    if ($.inArray(dmy, unavailableDates) < 0) {
     return [true,"","Book Now"];
    } else {
  return [false,"","Booked Out"];
  }
 }

 $('#iDate').datepicker({ beforeShowDay: unavailable });

Live Demo: http://jsfiddle.net/vfod0krm/

answered Aug 14 '14 at 22:35

Roman

359
3
6

just to note, this will show "book now" as tooltip for dates that have been disabled using the minDate/maxDate options – Sandra Mar 20 '18 at 15:04

jQuery UI Datepicker - Disable specific days

6 Answers6

Linked