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