How can I combine the jQuery datepicker plugin and hover event?

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

Well I assume the tableCellElement has the date in it correct? I haven't tested it, but..

alert($(this).text());

Answer 2

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>.

Read more at jQueryUI.com