Hover-to-click on jQuery UI datePicker 'next month' and 'prev month' not working

Question

Hi there,

I have a calendar which is meant to look much like the calendar in Outlook. There is a big field representing the hours in a day, and there is a date navigator. The navigator is the jQuery UI Datepicker.

I want users to be able to navigate to a new day by clicking on a date in the datepicker, but also to be able to drag appointments over the datepicker and drop them on a specific date. I have that working now.

I also want users, while they are dragging an appointment, to be able to move to next or previous month simply by hovering over the datepicker. So I've added a mouseenter and mouseleave event: one runs a setInterval function which sends a click every 1,5 seconds; the other cancels the interval function.

This is where all sorts of things go wrong. As soon as one click has been triggered, the mouseleave function no longer works: in other words, the datepicker keeps flipping over to another month every 1,5 seconds.

It seems that the datePicker interferes, or that the click event causes other things to go wrong. What can I do?

Answer 1

It sounds like your event listeners are been overwritten by the jQuery-UI Datepicker states. It you look at the source of the date picker, every time it changes state it re-declares its event listeners. Thats all I can say without looking at your source.

Post your source and I'll try to fix it for you. It may be necessary to monkey patch the Datepicker.