how to show Datebox calendar in jquery-mobile when clicking a button

Question

I don't want to have a date text field, just i want to pop up Datebox (calendar) only when the user clicks on a button ..

this code that i found ..

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

but I don't want a text field. only button to show a calendar

Answer 1

Does this work for you?

• http://jsfiddle.net/UtFMs/

JS

$('#linkmodelink').live('click', function() {
    $('#linkmode').datebox('open');
});

HTML

<div data-role="fieldcontain">
    <label for="linkmode">Some Date</label>
    <input name="linkmode" type="date" data-role="datebox" id="linkmode" data-options='{"noButton": true}' />
</div>
<br />
<a href="#" id="linkmodelink" data-role="button">Click Here</a>

I've just used the 'Open on Link' example here:

• http://dev.jtsage.com/jQM-DateBox/demos/odd/open.html

and added the data-role="button" to the anchor tag making jQM add the button markup

Answer 2

First: thanks Phill!! We where looking forward to this solution!

But, for those trying with JQM v:1.1.0 and jQ v:1.7.1 and Datebox v:2.1 you would have to make some slight changes to the code (thanks to @GeralOE):

HTML:

    <input data-theme="c" name="dtFrom" id="dtFrom" type="date" data-role="datebox"  data-options='{"mode": "calbox", "afterToday": true, "hideInput": true }' style="width: 30px" />
    <input name="dtTo" id="dtTo" type="date" data-role="datebox" data-options='{"mode": "calbox", "afterToday": true, "hideInput": true }' />                     

<div data-role="controlgroup" data-type="horizontal" id="btnCalendar">
    <a href="#" id="From" data-role="button">From</a>
    <a href="#" id="To" data-role="button">To</a>
</div>
​

JS:

$('#btnCalendar').on("click", "a", function() {
    $thisCalendar = $(this).attr("id");
    $('#dt' + $thisCalendar).datebox('open');
});

​

You can test it at: http://jsfiddle.net/geralOE/nAugy/2/ (we will update it to implement some other features like writing the date on the from and to button).

Also, take into consideration that "live" is deprecated as of 1.7, so you have to use "delegate" (which in turn will be deprecated, so prepare with "on".