How to call/bind a jquery datepicker to a label or div instead of an input field

Question

I'm working with the jqueryui datepicker on this page - http://jqueryui.com/demos/datepicker/

How do I call it on a label instead of an input field? Is this possible?

Answer 1

I haven't looked at the code but I suspect that it assumes that it's attached to a <input type="text"> element.

So assume that you must have that element.

You can hide the <input> and interact with the datepicker via calls to its methods from your label events.

$(labelselector).click(function() {
    $(inputselector).datepicker('show');
});

Answer 2

re: The positioning problem

The above suggestions didn't work for me to get a clean ui. I have my datepicker control activated when people click a label, and I didn't want the textbox shown at all (the above css attempt was close, but still the textbox got focus amongst other issues).

The solution for me was to make the textbox that the datepicker is attached to a < input type="hidden" .... /> This solved all the issues for me (I put the hidden input control just prior to the label so that the offset from the input control was right for my label).

Notably, setting a normal input controls style to display: none, or visibility: hidden, etc. did not work.

The reason this solution worked is due to the clauses in the source of the datepicker control that only perform certain functions if "type != "hidden".