CODEWITHSUNDEEP
jqueryjquery-uidatepickeruidatepickerjquery-ui-datepicker
Pedro Gil
Pedro Gil

Reputation: 541

jQuery UI Datepicker - allow only certain weekdays

I'm using jquery UI datepicker on a huge project and I realize now that I'll need to allow only certain weekdays on some areas. I read their documentation and didn't find anything about it.. I know that there are some datepickers scripts for jq which can do this but I don't want to use any additional script for this if it's possible. Anyone know any workaround for this? Maybe I'm misunderstood anything in their documentation?

NOTE: example of desired behaviour: http://codeasp.net/blogs/raghav_khunger/microsoft-net/1088/jquery-datepicker-disable-specific-weekdays

Thanks in advance for help, Cheers Pedro

Upvotes: 9

Views: 18059

Answers (5)

Mike Zavarello
Mike Zavarello

Reputation: 3554

Jean Mallet's answer (beforeShowDay: $.datepicker.noWeekends) is simple and elegant.

However, if you're already calling a function using beforeShowDay (as I was in my case), here's how you can disable certain days of the week (in this case, Sunday and Saturday), chained along with the rest of your function:

beforeShowDay: function (date) {

    /* your other function code here */

    if (date.getDay() > 0 && date.getDay() < 6) {
        return [true, ''];
    } else {
        return [false, ''];
    }
}

enter image description here

Upvotes: 1

Jean Mallet
Jean Mallet

Reputation: 71

$('selector').datepicker({
beforeShowDay: $.datepicker.noWeekends // disable weekends
});

Upvotes: 7

Jan Thomas
Jan Thomas

Reputation: 131

$( ".datepicker.future" ).datepicker('option','beforeShowDay',function(date){
    var td = date.getDay();
    var ret = [(date.getDay() != 0 && date.getDay() != 6),'',(td != 'Sat' && td != 'Sun')?'':'only on workday'];
    return ret;
});

Upvotes: 9

Fellipe Brito
Fellipe Brito

Reputation: 73

@Jan Thomas forgot to add the variable td. The correct code is:

$( ".datepicker.future" ).datepicker('option','beforeShowDay',function(date){
    var td = date.getDay();
    var ret = [(date.getDay() != 0 && date.getDay() != 6),'',(td != 'Sat' && td != 'Sun')?'':'only on workday'];
    return ret;
});

Upvotes: 7

jjross
jjross

Reputation: 678

From the docs:

beforeShowDay: The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or '' for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.

For an example, please see here:

http://codeasp.net/blogs/raghav_khunger/microsoft-net/1088/jquery-datepicker-disable-specific-weekdays

Upvotes: 1

Related Questions