Question

I am not aware of an easy way to perform a function when hovering over a day with the jQuery UI datepicker so I am trying to do a work around by assigning a class and then calling a hover function:

$('.someDate').hover(function() { alert(this) } );

This does not work how I would like it though because it returns [object HTML TableCellElement]. How could I assign an attribute to each date cell td tag so that I can retrieve the date value through that method.

Or am i completely missing a really obvious way of doing this?

Answer 1

You can make use of the beforeShowDay event, which takes in the date object.

$('#date').datepicker({
    beforeShowDay: function(date) {
        var dateString = 'date-'+date.getDate()+'-'+date.getMonth()+'-'+date.getFullYear();  
        return [true, dateString, ''];
    }
});

This will add a class of date-DD-M-YYYY to each of the <td>.

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
• [2] an optional popup tooltip for this date.

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

Read more at jQueryUI.com