I have a jQuery UI datepicker associated to a text field. It is set to showOn: 'button'. The datepicker appears correctly, beneath the text field, whenever the button is clicked. However, if I click in the text field and start manually changing it, the datepicker appears, but farther down the page and against the left edge of the screen instead of below the text field. If I first click the button twice (so that the datepicker appears and then is hidden), the datepicker does not appear when I manually change the text field.

How can I either prevent the datepicker from appearing when manually inputting the date, or have it appear correctly?