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?

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?

• javascript
• jquery
• datepicker
• jquery-ui-datepicker

• you don't need to copy paste anything into jquery.ui.datepicker. Always avoid modifying the jQuery plugins downloaded from third party sites. Above code should go into your own html page. – vijayP Commented May 29, 2017 at 7:13
• Hi vijayP, I tried to place this code into the html of the form but the form does not load now: <script type="text/javascript>$("#datepicker").datepicker({ beforeShowDay: function(date) { return [date.getDay() == 0 || date.getDay() == 1 || date.getDay() == 2 || date.getDay() == 3 || date.getDay() == 4 ] ; } });</script> I disagree about not editing the jquery.ui.datepicker for beforeShowDay because it has been mented out with vague clues about editing, meaning there is a way to edit this and that is what I am trying to find out how to do. – Michael Joseph Commented May 29, 2017 at 7:44

3 Answers 3

daysOfWeekDisabled

Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be ma-separated. Example: disable weekends: '06' or '0,6' or [0,6].

Use daysOfWeekDisabled for this

$('#datepicker').datepicker({
    daysOfWeekDisabled: [5,6]
});

Working fiddle

Edit

I did mistake in reading and post above answer about bootstarp datepicker.

For Jquery UI Datepicker try this

beforeShowDay: function(d) {
   return [!(d.getDay()==0||d.getDay()==6)]
}

Working fiddle

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 remended.

function(date) {
    var show = true;
    if(date.getDay()==6||date.getDay()==0) show=false;
    return [show];
},//don't forget ma 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];
    }
});

You can try this,

$("#datepicker").datepicker({
   beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day != 5 && day != 6), ''];
  }
});

http://jsfiddle/nWAnz/238/