Disable days in jQuery Datepicker depend on other properties in model MVC

Question

I want to disable specific days of the week in jQuery UI DatePicker , depending on whether a value is true or false in the model submitted in @razor view .

I have a bool for each weekday . If a value is constructed so will the day be available in datepickern but if false, then the day will be disabled.

I looked around on different sides here but none of these options worked for me . Here is my code :

$('#txtStartDate').datepicker({
    defaultDate: '+1w',
    numberOfMonths: 1,
    showAnim: 'slide',
    changeMonth: true,
    changeYear: true,
    showWeek: true,
    dateFormat: "yy-mm-dd",
    minDate: new Date(hidStartDate),
    beforeShowDay: function(date) {
        var day = date.getDay();

        if (day == 1 && $('#hidMonday').val() == "True") {
            return day;
        }

        if (day == 2 && $('#hidTuesday').val() == "True") {
            return day;
        }

        if (day == 3 && $('#hidWednesday').val() == "True") {
            return day;
        }

        if (day == 4 && $('#hidThursday').val() == "True") {
            return day;
        }

        if (day == 5 && $('#hidFriday').val() == "True") {
            return day;
        }
    },
});

$('#txtStartDate').css('clip', 'auto');

Once it has gone through about 5-6 days in the calendar , I get the following error in the console

" Jquery - ui.js : 9742 uncaught TypeError : Can not read property '0' of undefined "

That said , I have looked around on the solution proposed here , but it may not work. This solution is based on the following proposal:

Disable specific days of the week on jQuery UI datepicker

Thanks in advance.

Shashank Sood · Accepted Answer · 2016-06-30T10:31:03.367

1

I checked your code in this fiddle

if (day == 1 && $('#hidMonday').val() == "True") {
            return day;
        }

        if (day == 2 && $('#hidTuesday').val() == "True") {
            return day;
        }

The error is coming when no day object is returned(when it is not getting into any of the if conditions). You can not simply not return anything Better return false if any of the conditions is not met

edited Jun 30 '16 at 10:31

answered Jun 23 '16 at 06:40

Shashank Sood

480
5
16

Thanks for the answer. When i tried to return false when no condistion is met it disables all days even if some days should be enabled? – MrKrantz Jun 23 '16 at 06:54
u need to return true also. When you condition is met – Shashank Sood Jun 23 '16 at 06:56

score 1 · Answer 2 · answered Jun 23 '16 at 07:03

Acutally beforeShowday should return an array. That's what its document says

beforeShowDay 

Type: Function( Date date )
Default: null
A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date

*By default you can send null , otherwise return an array[flag,"",""] where flag is false for disabling

Disable days in jQuery Datepicker depend on other properties in model MVC

2 Answers2