jquery datepicker remove .ui-state-highlight class onSelect event

问题

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.

回答1:

Try

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

inst.dpDiv is the datepicker div that is generated.

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

回答2:

The method suggested by @Johan and @Stano works - but as soon as you change months and then back to the current month, the highlight on today returns. This slight modification fixes this:

$(function() {
   $( ".datepicker" ).datepicker({    
     beforeShow: function(input, inst) {clearToday(inst)},
     onChangeMonthYear: function(year, month, inst) {clearToday(inst)}
   });

   function clearToday(inst) {
        setTimeout(function() {
            inst.dpDiv.find('a.ui-state-highlight').removeClass('ui-state-highlight');
        }, 10);
}

I found I had to reduce the timeout to 10, otherwise the day highlight flickered on briefly and was visible.

回答3:

I wonder if they are adding the CSS class after the onSelect is fired.

One thing you could do is examine the properties that are set for ui-state-highlight, and then elsewhere in your code override them:

.ui-state-highlight {
  margin: 0 !important;
}

来源：https://stackoverflow.com/questions/12690626/jquery-datepicker-remove-ui-state-highlight-class-onselect-event