Show jQueryUI datepicker on button press without involving input field

Question

In an ASP.NET project, I'm looking for a way to have a jQueryUI datepicker come up when I press a button, then cause a postback when a date is selected. I've gotten the postback part working using this method, but I'm having trouble either getting the picker to go away when I want it to or to behave properly when a date is selected.

I've tried:

• Attaching the picker to the button itself, but it sets the text of the button to the chosen date after I select and before the postback happens, which I don't want.
• Attaching the picker to the button and setting the altField option to an <input type='text' /> that's positioned outside the browser window, but it still sets the text of the button when a date is chosen.
• Making it inline by attaching it to a div and creating it in the onclick of the button. But according to this forum post, the inline datepicker by design doesn't show a Done button, and I can't dismiss it by clicking outside of it.
  • I tried adding a Done button of my own to the datepicker's button container (that shows up when showButtonPanel is set), but it goes away when the month or year changes and none of the events I can bind to seem to allow me to add it back.
  • I tried attaching a mouseup handler to the document body so I can dismiss the datepicker when I click outside it, but that triggers when I click in the datepicker too, and seems to prevent the picker from working at all.

What's the best approach here?

Answer 1

I've used a hidden input field before and attached a datepicker to it with successful results:

$("#date").datepicker({...}); // #date has style display='none'

$("#show-date").click(function () {
    $("#date").datepicker("show");
});

Example: http://jsfiddle.net/7pttr/