Skip to content

Disable Friday and Saturday In Datepicker

I am trying to edit the beforeShowDay function in jquery.ui.datepicker. This is the original beforeShowDay lines in datepicker I’m trying to replace:

beforeShowDay: null, // Function that takes a date and returns an array with
        // [0] = true if selectable, false if not, [1] = custom CSS class 
        name(s) or '',
        // [2] = cell title (optional), e.g. $.datepicker.noWeekends

I have searched around trying to find the correct code to replace it with with no luck. I found this fiddle; disable 1 day in datepicker

I have edited this fiddle and succeeded in disabling Friday and Saturday with the following code:

    $("#datepicker").datepicker({
    beforeShowDay: function(date) {
        return [date.getDay() == 0 || date.getDay() == 1 || date.getDay() == 2 || date.getDay() == 3 || date.getDay() == 4 ] ;
    }
});

However when I copy and paste this into jquery.ui.datepicker the calendar does not function and I’m getting console errors (Uncaught SyntaxError: Unexpected token).

What I’m doing is replacing the original beforeShowDate with the following:

beforeShowDay: function(date) { return [date.getDay() == 0 || date.getDay() == 1 || date.getDay() == 2 || date.getDay() == 3 || date.getDay() == 4 ] ; }

Can anyone advise what I’m doing wrong and how I can get this to function correctly?

Answer

You should not edit the jQuery UI plugin directly

If you really want then you have to paste this code replacing null. but it is not recommended.

function(date) {
    var show = true;
    if(date.getDay()==6||date.getDay()==0) show=false;
    return [show];
},//don't forget comma after the function

Right way to do is to pass the function while configuring the jquery ui date-picker inside your own js file.

$("#datepicker").datepicker({
    beforeShowDay: function(date) {
       var show = true;
       if(date.getDay()==6||date.getDay()==0) show=false
       return [show];
    }
});