JQueryMobile Datebox - link without input box

Question

I'm looking to have a small cal icon (or the one embedded in input box) when clicked has the standard behavior of "popup calendar" and upon selection fires onClick event or function.

The basic calendar is:

<input name="mydate" id="mydate" type="date" data-role="date box" data-options='{"mode": "calbox"}'>

I would like it to only be an icon in the right side of the header. Here is my existing header code that has a "+" as a link to OnClick event.

<div data-role="header" class="tb">
    <h1>MyDate</h1>
    <a class="ui-btn-right" id="myplus" onclick="openPickDate();">+</a>
</div>

Answer 1

Here is a jsFiddle:

http://jsfiddle.net/ezanker/LS3g6/1/

---

The HTML markup to include a hidden datebox in the header with a button at top right is as follows:

<div data-role="header">
   <h1>My page</h1> 
   <a  data-role="button" id="myplus" class="ui-btn-right" >+</a>
   <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "calbox", "hideInput": "true", "centerHoriz": "true", "closeCallback":"onCLoseMyDate();"}' />
</div>

Setting hideInput to true hides the calendar input box, centerHoriz centers the popup on the screen and the closeCallback is called when you select a date and close the popup.

To launch the popup, handle the click event on the myplus button:

$('#myplus').on('click', function() {
    $('#mydate').datebox('open');
});

Then supply the callback function:

function onCLoseMyDate(){
    var dateObject = $('#mydate').datebox('getTheDate');
    alert(dateObject);   
}