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 swatch for choosen (centered) option
Theme swatch for other date elements
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.