JQuery UI Datepickers and Dialogs Oh My

Posted on Posted in Javascript, jQuery

Ok, a quick little post about some weird happenings with jquery UI datepickers and dialogs and some weird things.

I am working on an application that opens alternate dialogs (dialog on top of another dialog) with text fields that are turned into datepickers on the focus event. Well, if you know anything about the behavior of dialogs, it automatically focuses the first element in the dialog upon open. In my case that was the first date field (think start and end dates).

Well, that wasn’t really a problem but when using the second datepicker, the on select event wouldn’t fire properly. It didn’t fill the text field and then shifted focus to the first datepicker. Weird! And I couldn’t programmatically getting it to work by using the onSelect event or onClose event to shift focus around OR even get it to fill using the altField attribute either. Frustrating!

Well, 2 possible solutions I could come up with from there. Don’t fill the HTML of the dialog until after the dialog is open and that would prevent the datepicker from firing until a “real” focus event rather than a programmatic focus event.

Another solution that I eventually went with is to disable the focus of the open event of the dialog. I disabled it for all dialogs on the page.

$.ui.dialog.prototype._focusTabbable = function(){};

This allowed multiple datepickers on the page to finally work correctly. Hopefully, this little quick post will spare someone the 45 minute headache I had.