Question

I am developing the web application, in this application i used the jquery datepicker plugin. I am using the datepicker as inline datepicker. when i select a date, i am trying to remove a css class ui-state-highlight, but not reflected in datepicker.

    $("#start_date").datepicker({
    beforeShowDay: greySelectedDateRange, 
    maxDate: 0,
    onSelect: function (dateText, inst) {
        console.log(dateText);
        var toDaysDate = getCurrrentDate('mdy'); //function returning current date
        console.log(toDaysDate);
        //When the selected date is equal to current date 
        if (dateText == toDaysDate) {
            $(this).find('a.ui-state-active')
                   .removeClass('ui-state-highlight')
                   .find('.ui-datepicker-today a')); 
             //$(this).datepicker("refresh");
            //console.log($(this));
        }
    }
});

When i see the console console.log($(this));, it has been removed, but when i inspect, the css class( ui-state-highlight ) is still there, please suggest me a solution.

Thanks in advance.

Answer 1

Try

inst.dpDiv.removeClass('ui-state-highlight');

inst.dpDiv is the datepicker div that is generated.

http://jsfiddle.net/abhMH/2/