jQuery UI Datepicker after select/change month/year

Question

I wanted to find out how I can run some piece of code (attach mouseenter event) for every day after user has selected a day or changed a month/year?

I have tried to attach the event on these events

• beforeShow
• beforeShowDay
• onChangeMonthYear
• onSelect

On hover I want to highlight next day in the same row if it exists.

Currently I attach moouseenter/mouseleave event to all days after datepicker is created (which is inline).

I have simplified what I'm doing in the JS fiddle below. I need to have those events working after a date is selected and after month/year has been changed.

JS Fiddle: http://jsfiddle.net/MartinTale/Xx4GS/2/

$("div").datepicker({
    changeMonth: true,
    changeYear: true,
    inline: true,
    altField: "#datep"
});

$("tbody td:not(.ui-state-disabled, .active-calendar-cell)").mouseenter(function (e) {
    $(this).closest('td').next().find("a").addClass("hover-calendar-cell");    
    console.log('test');
});

$("tbody td:not(.ui-state-disabled)").mouseleave(function (e) {
    $("a.hover-calendar-cell").removeClass("hover-calendar-cell");
    console.log('test out');
});

Thanks in advance.

Answer 1

You can use the provided jQuery datepicker events onSelect and onChangeMonthYear.

Code:

$("#datep").datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function () {
        console.log('s');
    },
    onChangeMonthYear: function () {
        console.log('o');
    }
});

Demo: http://jsfiddle.net/IrvinDominin/Xx4GS/

Answer 2

Here is hacky hack.

http://jsfiddle.net/Xx4GS/3/

It works, highlights the next day( the next td in this case).

setTimeout is because I think jquery ui destroys the active date item, so we wait until we have the right one.

You might be able to use onSelect instead of .change, but not a big deal imo

I left a console.log in there so you can see a little bit of whats going on.