Question

I want to make a current selected datepicker td an active class and remove the active class of the previous selected td.

markup:

<input type="text" id="Dateis" />

jquery:

$(function ()
  {
    $("#Dateis").datepicker();

    $(this).hover
    (function ()
    {
        // add current td active class
         //remove old td active class
    }, 
    function ()
    {
          // add current td active class
         //remove old td active class
    });  
});

Jsfiddle:

Active Class

Was it helpful?

Solution

.closest()

$(function () {
    $("#Dateis").datepicker().hover(function () {
        $(this).closest('td').addClass('active');
    }, function () {
        $(this).closest('td').removeClass('active');
    });
});


Or

$(function () {
    $("#Dateis").datepicker().on('mouseenter mouseleave',function(){ 
        $(this).closest('td').toggleClass('active');
    });
});

.addclass()

.removeClass()

.toggleClass()


Update After OP's comment

Fiddle Demo

$(document).on("mouseenter mouseleave", ".ui-state-default", function () {
    $(this).closest('td').toggleClass('ui-state-active');
});


Remove today's date highlight

Fiddle Demo

.ui-datepicker-today a.ui-state-highlight {
    border-color: #d3d3d3;
    background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    color: #555555;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top