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

Are you trying to bind it so that it shows on click or so that the results populate a Label or Div? You could bind it to a hidden text box then bind your desired effects to the change() event of that hidden field.

$(function() {
     $("#datepicker").datepicker();

            $("#alternate").click(function() {
             $("#datepicker").focus();
         });

     $("#datepicker").change(function() {
      $("#alternate").html($("#datepicker").val());
     });
    });

<input id="datepicker" style="display:none" /><label id="alternate">change me</label>

This worked fine for me in FireFox 3.5

Answer 3

re: the positioning problem:

It looks like Datepicker sets its position absolutely, based on the offset of the element it's targeting. Unfortunately, display: none elements have no offset.

Two suggested methods:

1) Set the position using datepicker's own method and the offset of an object of your choice. Try something like:

offset = $('myinput').parent('label').offset();
$('#date-picker').dpSetOffset(offset.left, offset.top);

2) Try a different method of hiding your input, maybe something like opacity: 0 (and its IE equivalent, filter:alpha(opacity=x)). Another thing to try might be setting a bunch of styles to reduce the input field, like:

.my_input {
  border: 0;
  line-height: 0;
  font-size: 0;
  height: 0;
  overflow: hidden;
 }

Get the input as close to invisible as possible without actually removing it from the visible page, which it needs to exist on in order for datepicker to get a position from.

Answer 4

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".