datepicker (enable individual dates)

Question

Due to my requirements i'm looking for an example of how to 'enable' a specific date in a JQUERY datepicker. I've disabled all in 2 lines of code and my logic has some specific dates that I need to enable. To do this by disabling would require much more code complexity. I've tried to find examples of enabling but came up with nothing.

If it cannot be done for specific dates i'll need to press on but I wanted to check first

function changeFormat() {
    dVal = $("#FirstPeriodReconDate").datepicker("getDate");

    StartDate = new Date(dVal);
    EndDate = new Date(dVal);

    $("#FirstROCRecycleReconDate").datepicker("option", "numberOfMonths", 3);
    $("#FirstROCRecycleReconDate").datepicker("option", "buttonImage",
        $("#AbsolutePath").val() + 'Content/images/Control_MonthCalendar.bmp');
    $("#FirstROCRecycleReconDate").datepicker("option", "buttonImageOnly", true);

    StartDate = new Date("May 20, 2012");
    EndDate = new Date("June 21, 2012");
    $("#FirstROCRecycleReconDate").datepicker("option", "minDate", StartDate);
    $("#FirstROCRecycleReconDate").datepicker("option", "maxDate", EndDate);
}

Now I would like to enable a specific date, at this point all dates are disabled. I require to enable say 1st June 2012 but not sure if its possible

Thanks in advance J

I think you can get a long way with this post: http://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holid/503082#503082 — Styxxy, May 28 '12 at 13:17

score 2 · Accepted Answer · answered May 28 '12 at 13:32

2

You can use the beforeShowDay event of jQuery UI's Datepicker (docs):

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.

You could implement it like this (live example):

var _allowedDates = [
    new Date(2012, 4, 27).getTime(),
    new Date(2012, 4, 28).getTime(),
    new Date(2012, 4, 29).getTime(),
];

function allowedDates(date) {
    date = date.getTime();

    for (i in _allowedDates)
        if (date == _allowedDates[i])
            return [true, ""];

    return [false, ""];
}

$('#datepicker').datepicker({
    beforeShowDay: allowedDates
});

answered May 28 '12 at 13:32

Jonathan

6,572
1
30
46

Please can you tell me how to do this in just one line, no arrays etc, I cannot get this to work. If I can do simply as one line with a single date value i can code from there. I tried the following but its not working : x = new Date("May 21, 2012"); $("#FirstROCRecycleReconDate").datepicker("option", "beforeShowDay",x); – John May 28 '12 at 16:12
@John: Unfortunately you have to use `beforeShowDay`. There is no way to do it with one line of code with the API. – Andrew Whitaker May 28 '12 at 16:28
I'm puzzled, the code does not show any javascript errors. It executes fine but the allowedDates is not invoked at all. – John May 29 '12 at 04:09
@John Can you show the code your using? You could upload is to http://jsfiddle.net/ or http://snippi.com/, for example. – Jonathan May 29 '12 at 16:27
1

Your code to whitelist does not work. See my [fork](http://jsfiddle.net/eq8hghsm/). – Adrian Larson Dec 08 '14 at 18:16
At least not as of Chrome 39.0.2171.71. – Adrian Larson Dec 08 '14 at 18:24
Do not use for( ... in ) for arrays. Ever! I understand the spirit of the answer but this particular implementation is very dangerous. Read https://stackoverflow.com/a/3010848 on how to implement the array search properly. – XDS Feb 08 '21 at 09:13

datepicker (enable individual dates)

1 Answers1