Activating a JQuery UI datepicker via remote Button

Question

I'm using the JQuery UI datepicker, but instead of attaching the datepicker to an input[type=text] element, i'm attaching it to an input[type=hidden] element. In order to activate the datepicker, I'm using a remote button on the UI that's not a sibling of the input element the datepicker is attached to.

In order to show the datepicker, I'm using a click event handler which executes this code

$('input.trial_end_date').datepicker('show');

This works to show the datepicker, but whenever I click a date, I get an uncaught javascript exception:

Uncaught Missing instance data for this datepicker jquery-ui-1.10.1.custom.min.js:6
e.extend._getInst jquery-ui-1.10.1.custom.min.js:6
e.extend._selectDay jquery-ui-1.10.1.custom.min.js:6
t.selectDay jquery-ui-1.10.1.custom.min.js:6
v.event.dispatch localhost.local/:5
o.handle.u localhost.local/:5

However, if I change the input[type=hidden] to an input[type=text] to allow the datepicker to show when the input element is focused, all click events fire without any problems (until I activate the datepicker via the button, then they all fail no matter which way the datepicker is activated).

Is there a more reliable way to activate the date picker via a remote button and hide the input element for the date? I'm not sure why this exception is being thrown at all.

Here's an example of this not working in a JSFiddle. Though, the exception isn't the same. After further research, I seem to have found the reason, which I'll add in an answer below.

Answer 1

Why would you use a hidden input when you can instantiate a datepicker on a regular div and just hide and show that div? If you don't need the input, don't use it.

<input type="button" id="open" />
<div id="datepicker"></div>

JS

$('#datepicker').datepicker();

$('#open').on('click', function() {
    $('#datepicker').toggle();
});

FIDDLE

Answer 2

After messing around with this problem a bit in a JSFiddle, (http://jsfiddle.net/XJ7Z7/1/), it's apparent that if you attach the datepicker to an input element - the input element must be visible (ie, not a hidden element).

The reason for this is because the Datepicker module tries to position the calendar via position:absolute; and to do so accurately needs to get the top/left offset for the input element to which it is attached. A hidden input element has no top/left offset (it's set to 0/0), so therefore the module skips that element to try to find one that is visible that it can use to calculate where to place the calendar.

If there's no sibling element that can be used the reference object gets set to null and an exception is thrown when the datepicker tries to access the left/top properties of the return object of $(el).offset() because the call to offset returns a null value.

The solution here is outlined by @adeneo in the accepted answer, but the sacrifice is that you'll have to manage your hidden input value for the selected date on your own via the onSelect callback of the datepicker module initialization.

I hope this helps someone out there who is running into a similar problem.