jQueryMobile - DateBox

Home

jQuery Mobile Framework :: DateBox

A Date and Time Picker plugin for jQueryMobile

No Button, Focus Mode

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}'>

Button and Focus Mode

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}'>

Open on Link

You can force open the dialog by clicking here.

Source Code
HTML
<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');
});

Using in control groups

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
HTML
<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
HTML
<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
HTML
<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());
});