jQuery UI: DatePicker Animation Registration Point

Question

By default, the jQuery UI DatePicker widget animates from the bottom-left of the input field it's assigned to, so if the input field is shorter than the width of the calendar, it hangs off to the right.

My problem is that my input field is all the way on the right side of the page, so that when the Datepicker shows, it hangs off my page boundary. Is there anyway to change the registration point for the animation to the bottom-right of the input field? I'd love to keep the same "fade-and-scale" effect that comes default.

How would I do this? I assume it's something with the showAnim property, but I haven't been able to figure it out...

Answer 1

You might look into using the dialog method instead, or just dig into the datepicker source and change the calculation for the x-coordinate. Even better, add the ability to specify it as an option and contribute to the project! :)

Answer 2

This seems like a limitation in the way it is built. Two solutions I would suggest:

1. First solution would be to make your own javascript override to reposition the datepicker after load, then bind it to a special css class for textboxes that will appear in this situation. The js / jquery override should not be too complicated, and by not having to hack the core jquery ui library, you're not hurting anything else.

2. Point out the limitation to the jQuery UI dev team over in the jQuery UI google code group.

Answer 3

The 1.8 version of jQuery UI includes a plugin called Position which might be compatible with the datePicker.

jQuery UI 1.8 is planned to be released .. right now it seems, a post written the 16:th february states:

We hope to release jQuery UI 1.8 final after a couple days, assuming there aren’t any blocking issues present in this release candidate.