Highlight dates in jquery UI datepicker

Question

How i can use beforeShowDay for highlighting days in jQuery UI datepicker. I have the following date array

Array
(
    [0] => 2011-07-07
         


        

Answer 1

Have a look at the documentation.

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.

This means that you need to create a function that will take a date and return an array of parameters where values are:

1. boolean - indicates if date can be selected
2. string - name of the css class that will be aplied to the date
3. string - an optional popup tooltip for this date

here is an example:

var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.

$('#whatever').datepicker({
   beforeShowDay: function(date) {
      // check if date is in your array of dates
      if($.inArray(date, your_dates)) {
         // if it is return the following.
         return [true, 'css-class-to-highlight', 'tooltip text'];
      } else {
         // default
         return [true, '', ''];
      }
   }
});

and now you can add the style to highlight the date