Jqueryui datepicker with hidden input

Question

I have a button and hidden input.

I want the datepicker to open under the button that I click. And the selected date is inserted into the hidden input.

I don't want to create a new button (using datepicker options), and I don't want to show the input.

<button type="button" class="btn" id="date_button">Select Date...</button> <input type="hidden" name="date" id="date_field" /> <script> $('#date_button').datepicker({ showOn: "button", onSelect: function( dateText ) { $('#date_field').val( dateText ); $('#date_button').text( dateText ); } }) </script> 

Any ideas?

Answer 1

I did this by executing .show (). focus (). hide () works fine, although it's a little dirty:

 $(document).ready(function() { $('input').datepicker(); $('#mybutton').click(function() { $('input').show().focus().hide(); }); }); 

http://jsfiddle.net/JKLBn/

Answer 2

This is a bit hacky, but everything seems to be fine:

• Attach the datepicker parameter to input instead of the button.
• Check the datepicker checkbox under the button when it opens.

 var $button = $("#date_button"), left = $button.offset().left, top = $button.offset().top + $button.height(); $('#date_field').datepicker({ onSelect: function(dateText) { $('#date_field').val(dateText); $button.text(dateText); }, beforeShow: function (event, ui) { setTimeout(function () { ui.dpDiv.css({ left: left, top: top }); }, 5); } }); $button.on("click", function() { $("#date_field").datepicker("show"); }); 

Example: http://jsfiddle.net/StUsH/