jQueryMobile - DateBox

Home

Custom Box Mode

Using the custom box mode is as simple as setting the 'mode' option to "custombox", and defining some data.

Note: this demo show the "new" style, and a custom icon style. Source below explains their use - basically, it just applies the *extra* style - override background-image to get rid of the calendar icon

<script type="text/javascript">
  jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    'customData': [
      {'input': true, 'name':'Letter', 'data':['a','b','c','d','e']},
      {'input': true, 'name':'Text', 'data':['some','bull','shtuff','here']}
    ],
    'useNewStyle': true,
    'overrideStyleClass': 'ui-icon-dice'
  });
</script>
<style>
  .ui-icon-dice { background-image: url('../../img/dice.png') !important; background-repeat: no-repeat; background-position: 99% 50%; }
</style>

<div data-role="fieldcontain">
  <label for="cf">Custom</label>
  <input name="cf" type="date" data-role="datebox" id="cf" data-options='{"mode": "custombox"}' />
</div>

Theme Options

  • themeOptPick

    Theme swatch for choosen (centered) option

  • themeOpt

    Theme swatch for other date elements

Data

The data structure is pretty rigid. It is an array, consisting of objects like the following:

{'input': Boolean, 'name': 'The label for the roller', 'data': ['an','array','of','values']}

If you don't wish to use labels, name must still be present - just leave it an empty string. "Values" can be any valid HTML - customflipbox doesn't care in the least

'input', when set true, lets custombox know the data list is simple strings - otherwise, it will encase in a DIV instead, to preserve formatting.

Return values are a comma-delimeted string of INDEXES. Your data will *never* be passed to the input, it's up to you to interpet it on the backend.

Note: each data list is probably limited to 10 items. If you need more, send me an e-mail, and I'll walk you though raising the limit.