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…
This seems like a limitation in the way it is built. Two solutions I would suggest:
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.
Point out the limitation to the jQuery UI dev team over in the jQuery UI google code group.