A Date and Time Picker plugin for jQueryMobile
You can open on focus, removing the button by using 'useFocus' set to 'true' and 'useButton' set to false
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode":"calbox", "useFocus": true, "useButton": false}'>
You can open on focus, leaving the button by using 'useFocus' set to 'true'
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode":"calbox","useFocus": true}'>
You can force open the dialog by clicking here.
<label for="mydate">Some Date</label> <input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"noButton": true}'> <a href="#" id="linkmodelink">Open Link</a>jQuery
$('#linkmodelink').live('click', function() { $('#mydate').datebox('open'); });
You can open datebox with a standard button as part of a control group. Here's 3 examples:
1) Just a date button in a horizontal control group. Current date is
Source Code<div style="display:none"> <input name="ctrlgrp" type="text" data-role="datebox" data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp" /> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="delete" data-iconpos="left">Left Icon</a> <a href="#" id="ctrlgrpbut" data-role="button" data-icon="grid" data-iconpos="left">Set Date</a> <a href="#" data-role="button" data-icon="delete" data-iconpos="right">Right Icon</a> </div>jQuery
$('#ctrlgrpbut').on('vclick', function() { $('#ctrlgrp').datebox('open'); }); $('#ctrlgrp').bind('change', function(e,p) { $('#ctrlgrpout').text($(this).val()); });
2) Just a date button in a vertical control group. Current date is
Source Code<div style="display:none"> <input name="ctrlgrp" type="text" data-role="datebox" data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp" /> </div> <div data-role="controlgroup"> <a href="#" data-role="button" data-icon="delete" data-iconpos="left">Left Icon</a> <a href="#" id="ctrlgrpbut" data-role="button" data-icon="grid" data-iconpos="left">Set Date</a> <a href="#" data-role="button" data-icon="delete" data-iconpos="right">Right Icon</a> </div>jQuery
$('#ctrlgrpbut').on('vclick', function() { $('#ctrlgrp').datebox('open'); }); $('#ctrlgrp').bind('change', function(e,p) { $('#ctrlgrpout').text($(this).val()); });
3) A date button in a horizontal control group, with the current date as the text
Source Code<div style="display:none"> <input name="ctrlgrp" type="text" data-role="datebox" data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp" /> </div> <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="delete" data-iconpos="left">Left Icon</a> <a href="#" id="ctrlgrpbut" data-role="button" data-icon="grid" data-iconpos="left">Set Date</a> <a href="#" data-role="button" data-icon="delete" data-iconpos="right">Right Icon</a> </div>jQuery
$('#ctrlgrpbut').on('vclick', function() { $('#ctrlgrp').datebox('open'); }); $('#ctrlgrp').bind('change', function(e,p) { $('#ctrlgrpbut').find('.ui-btn-text').text($(this).val()); });