JQuery UI Datepicker: align below label

Question

http://jsfiddle.net/r7D2x/

I am trying to use jQuery Datepicker on a label ( <span> ) instead of an input field. Here is the code:

 // javascript $('#placeholder').datepicker({ changeMonth: true, changeYear: true, showMonthAfterYear: true, showOn: 'button', buttonText: 'set', dateFormat: 'dM-y', onSelect: function(dateText, inst) { var date = $(this).datepicker('getDate'); var epoch = date.valueOf() / 1000; $('#value').val(epoch); $('#label').text(dateText); } }); (function() { var initial = 1297800000; var $label = $('#label'); if (initial == '' || initial == '0') { $label.text('not set'); } else { var date = new Date(initial * 1000); $label.text($.datepicker.formatDate('dM-y', date)); } })(); <!-- html --> <span id="label" /><:input_nulldate></span> <input type="hidden" id="placeholder" /> <input type="hidden" id="value" /> 

But I can’t get its popup under <span> . Instead, he continues to pop up over the button. How can I get it to align correctly?

Answer 1

You can move the window using css. For instance:

 .ui-datepicker { margin-left: -80px; margin-top: 40px } 

Get information about where you want.