jQueryMobile - DateBox

Home

Custom Flip Mode

Using the flip mode is as simple as setting the 'mode' option to "customflip".

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": "customflip"}' />
</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' is not used in this mode, it need not be present.

Return value can be customized with "customFormat" - %X1 = Index of first data element, %Xa = NAME of first data element, etc. Note, that if you use names, and the include your field delimiter, I've no idea if the parser will like it. Indexes are much, much safer.

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. (function _curbox_arr - change all instances of '10' to something else probably. Not tested.)