Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery UI Datepicker - Disable specific days

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!

like image 660
Sam Avatar asked Mar 24 '09 15:03

Sam


People also ask

How do I enable only certain dates in datepicker?

Answers. To achieve this function, you can use beforeShowDay in the datepicker to do it.

How to block previous date in datepicker?

the previous dates we need to set the minDate property of the date picker. if we set minDate:0 then it will disable all the previous dates. and we set input attribute min:current_date then it will disable all the previous dates.


3 Answers

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

like image 188
Tokes Avatar answered Oct 18 '22 10:10

Tokes


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

like image 40
Chris Haines Avatar answered Oct 18 '22 11:10

Chris Haines


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.

like image 31
Alex K Avatar answered Oct 18 '22 12:10

Alex K