CODEWITHSUNDEEP
javascriptjquerydatepickerjquery-ui-datepicker
Michael Joseph
Michael Joseph

Reputation: 135

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?

Upvotes: 2

Views: 15760

Answers (3)

Nadir Laskar
Nadir Laskar

Reputation: 4170

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];
    }
});

Upvotes: 7

Trimantra Software Solution
Trimantra Software Solution

Reputation: 3329

You can try this,

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

http://jsfiddle.net/nWAnz/238/

Upvotes: 1

Manoj
Manoj

Reputation: 5071

daysOfWeekDisabled

Days of the week that should be disabled. Values are 0 (Sunday) to 6 (Saturday). Multiple values should be comma-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

Upvotes: 8

Related Questions