Question

I am using jQuery UI Datepicker. How can I add a class to the element on click event.

Below is my code. What am I doing wrong?

$(function(){

   $('#calendar').datepicker();
   $('#calendar').children('td').click(function(){
         $(this).addClass('selected');
   });

});

Answer 1

Here’s a quick solution that should get you started, anyway:

var selectedDay = new Date().getDate();

$(function() {
    $("#calendar").datepicker({
        onSelect: function(dateText, inst) {
            // Save the selected day on select (if you show other months dates, you should save the selected month also.)
            selectedDay = inst.selectedDay;
        },
        // This is run for every day visible in the datepicker.
        beforeShowDay: function (date) {
            if (date.getDate() == selectedDay) {
                return [true, "selected", ""]; // Here you set your css class
            } else {
                return [true, ""]
            }
        }
    });
});​

The beforeShowDay function will take care of setting the css class and remove it from other days.

Of course you can extend this to work with multiple selected dates, this is just to show where you can start.