9

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

Pedro Gil
  • 532
  • 2
  • 7
  • 18

5 Answers5

9
$( ".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;
});
Fellipe Brito
  • 73
  • 1
  • 3
Jan Thomas
  • 131
  • 1
  • 6
  • The td variable is being assigned an integer value but it's being compared to strings. I think you wanted this: var td = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][date.getDay()]; – primehalo Jan 14 '17 at 02:35
7
$('selector').datepicker({
beforeShowDay: $.datepicker.noWeekends // disable weekends
});
Jean Mallet
  • 71
  • 1
  • 3
7

@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;
});
Fellipe Brito
  • 73
  • 1
  • 3
  • 1
    can td be "sat" if it is a NUMERICAL representation of the given day? A bug or I don't get it. – Tyler May 20 '14 at 00:48
  • The td variable is being assigned an integer value but it's being compared to strings. I think you wanted this: var td = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][date.getDay()]; – primehalo Jan 14 '17 at 02:36
1

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

Mike Zavarello
  • 3,514
  • 4
  • 29
  • 43
1

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

jjross
  • 678
  • 1
  • 6
  • 19