4

I have been trying to find a clear explanation for a significant amount of time now but I just can't seem to understand how this method works. Below is the official documentation from the Jquery UI API. It may be clear to others but I find it a bit vague. I simply want to take an array of dates and disable them. I am able to make all dates not selectable but not the ones I want.

beforeShowDayType: Function( Date date )

Default: null

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

The function is called for each day in the datepicker before it is displayed.

This is my (incomplete) code so far.

$(document).ready(function() {
    var array = ["2014-01-03","2014-01-13","2014-01-23"];
    $('#fromDate').datepicker({
        dateFormat: "yy-mm-dd",
        beforeShowDay: function(date) {
            {
                return [false, "", "Booked out"];
            } else {
                return [true, "", "available"];
            }
        }
    });
});
Salman A
  • 262,204
  • 82
  • 430
  • 521
chap
  • 1,860
  • 5
  • 24
  • 39
  • 3
    Looks like a good start. Now all you need is an `if` statement between those two `{`s. The variable `date` will be the date to make a decision on, so your condition is basically `if ( dateIsBookedOut(date) )` – IMSoP Feb 10 '14 at 00:18

1 Answers1

5

Try this:

beforeShowDay: function(date) {
    if($.inArray($.datepicker.formatDate('yy-mm-dd', date ), array) > -1)
    {
        return [false,"","Booked out"];
    }
    else
    {
        return [true,'',"available"];
    }
}
Jain
  • 1,209
  • 10
  • 16