Saturdays only in .JS Datepicker

Question

I'm working with a pre-integrated .js datepicker and need to ensure only Saturdays are selectable.

My code in it's current form:

(function($){
    "use strict";

$.fn.gdlr_datepicker_range = function(){
    $(this).datepicker({
        minDate: 0,
        dateFormat : 'yy-mm-dd',
        numberOfMonths: [1, 2],
        beforeShowDay: function(date) {



            var date1 = $.datepicker.parseDate('yy-mm-dd', $("#gdlr-check-in").val());
            var date2 = $.datepicker.parseDate('yy-mm-dd', $("#gdlr-check-out").val());
                        return [date.getDay() === 6, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];


        },
        onSelect: function(dateText, inst) {
            var date1 = $.datepicker.parseDate('yy-mm-dd', $("#gdlr-check-in").val());
            var date2 = $.datepicker.parseDate('yy-mm-dd', $("#gdlr-check-out").val());
            if (!date1 || date2) {
                $("#gdlr-check-in").val(dateText);
                $("#gdlr-check-out").val("");
            } else {
                $("#gdlr-check-out").val(dateText).trigger('change');
            }
        },
        closeText: objectL10n.closeText,
        currentText: objectL10n.currentText,
        monthNames: objectL10n.monthNames,
        monthNamesShort: objectL10n.monthNamesShort,
        dayNames: objectL10n.dayNames,
        dayNamesShort: objectL10n.dayNamesShort,
        dayNamesMin: objectL10n.dayNamesMin,
        firstDay: objectL10n.firstDay
    });

If somebody could point me in the right direction with a snippet, I would be extremely grateful!

Try from here: http://stackoverflow.com/questions/4604435/is-there-anyway-to-have-a-jquery-ui-date-picker-only-allow-saturdays — Beroza Paul, Sep 29 '15 at 17:02

score 0 · Answer 1 · answered Sep 29 '15 at 16:59

0

Did you try using the getDay()?

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

answered Sep 29 '15 at 16:59

Murilo Amaru Gomes

146
5

score 0 · Accepted Answer · answered Sep 29 '15 at 16:59

0

Quoting the docs on beforeShowDay param:

A function that takes a date as a parameter and must return an array with:

[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date`s cell or "" for the default presentation
[2]: an optional popup tooltip for this date

It's easy to guess the solution: just change beforeShowDay function so that it checks the day of week of selected date when setting the first element of the returned array:

return [date.getDay() === 6, /* the rest remains the same */];

Demo.

answered Sep 29 '15 at 16:59

raina77ow

103,633
15
192
229

Thanks for this. Whilst logic dictates this should work, it sadly doesn't. – JamesF9592 Sep 29 '15 at 17:17
Erm. Can you explain how exactly it doesn't work? Have you checked the demo? – raina77ow Sep 29 '15 at 17:18
I have checked demo. I'll paste full code example as answer... Thanks! – JamesF9592 Sep 29 '15 at 17:21
Additionally if you'd like to take a look at the front-end datepicker to see the outcome of the above addition, you can find it here http://escocia.frost.digital/reservas/ Like I said, not sure why the getDay() doesn't appear to be doing anything. – JamesF9592 Sep 29 '15 at 17:41
I checked your code, `beforeShowDay` function doesn't even get called (it's easy to check - just set up a breakpoint in the middle of it). That happens because the corresponding datepicker is applied to an empty jQuery object (because `main.init()` is called before DOM is loaded apparently). Now, for some mystic reason these elements are decorated with another datepicker - and that's the one you see. The question is, why so complicated? – raina77ow Sep 29 '15 at 18:03
Wow. That's ridiculous. I should add this code in particular was not written by me. We're using an existing theme on this build to speed things up, and this is one of the original parts that hasn't been changed. – JamesF9592 Sep 29 '15 at 18:20
I see. Well, the path is clear - just remove the redundant datepickers, then make sure the one you need are called. I'd bet they'll have their `beforeShowDay` working just fine. ) – raina77ow Sep 29 '15 at 18:22
Finally figured this out. Thanks a lot for pointing me in the right direction - wouldn't have figured this out without your help! – JamesF9592 Sep 29 '15 at 19:22
Hi raina, sorry to come back to haunt you regarding this matter! Could you show me how to enable only april, may, june, july, august, september by adding to the snippet above? I've been messing around with this all day to no avail! – JamesF9592 Oct 12 '15 at 16:57
Everything I seem to add to this just breaks the calendar! :( – JamesF9592 Oct 12 '15 at 17:16
`date.getMonth() > 2 && date.getMonth() < 9`, check [the demo](http://jsfiddle.net/eencj6es/) (you'll have to scroll up to 2016 for obvious reasons). – raina77ow Oct 12 '15 at 17:20
This works perfect for the month part man - but unfortunately it breaks the Saturdays only part! Really appreciate your time on this one. – JamesF9592 Oct 12 '15 at 17:27
Append `&& date.getDay() === 6` to. – raina77ow Oct 12 '15 at 17:34
This project has taught me that I definitely need to take a JS course. I can't seem to append without breaking code. Could I trouble you for once last demo? What does a beer cost where you are raina? Feels like I owe you one. – JamesF9592 Oct 12 '15 at 17:45
Yes, you should take JS course, because it's really [a basic stuff](http://jsfiddle.net/zpcthma8/). ) – raina77ow Oct 12 '15 at 17:48

Saturdays only in .JS Datepicker

2 Answers2

Linked