CustomFlip

The custom modes allow you display and select data that has absolutly nothing to do with dates. It uses the bare minimum of the datebox framework to provide the same UI to any matrix data you might have.

Shown below are the configuration options. This is the most complete documentation for this mode, but it does appear in the API as well.

Options

Simple Options

overrideCustomSet

Set button text. Note that this really should be set in a language pack. But included here for easy use. If you needed to do a lot on a per page basis, something like:

jQuery.mobile.datebox.prototype.options.lang['en'].customSet = "English"; //etc...

customHead

Allows you to force the header text to whatever you specify. Leaving it false allows datebox to work as normal, grabbing either the placeholder attribute, or the label text (in that order of preference). If neither is found, it will be blank. Note that this option is not i18n aware.

customFormat

The intended output format for the data. At a glance, valid options are %Xa … %Xe and %X1 … %X6 - if numeric, it will output the index of the data, if alphabetic, it will be the actual data. Note that re-opening the control when outputting the actual data is very error-prone, usually resulting in the control reverting to the “default” values. When left ‘false’, datebox will build an appropriate format of just the indexes.

customDefault

The default selection for the data. This is an array of indexes. This must be set, as datebox can not really take a reasonable guess at your data. By default it is [0,0,0], which will choose the first data element of up to three sources.

customData

customData takes an array of data objects, up to 6. (a/n: probably this isn’t checked, but 6 can be made to display somewhat ok). The objects must contain:

Of particular note, if you pass this option a simple string, it will assume that it is a refernce to a global variable. For instance, if you pass in “myDataList”, DateBox will attempt to read “window.myDataList”.

Working Example

Sample Data

Default. (customFormat === ‘%Xa’)

[{
  "input": true,
  "name": "",
  "data": ["Single", "Separated", "Involved", "Married", "Widowed", "Lover", "Other"]
}]

Slot Machine! (SET customFormat === ‘%X1,%X2,%X3’ FIRST)

[
  {"input": false, "name": "Reel 1", "data":[
    "<span class='glyphicon glyphicon-king'></span>",
    "<span class='glyphicon glyphicon-queen'></span>",
    "<span class='glyphicon glyphicon-bishop'></span>",
    "<span class='glyphicon glyphicon-knight'></span>",
    "<span class='glyphicon glyphicon-tower'></span>",
    "<span class='glyphicon glyphicon-pawn'></span>"
  ]},
  {"input": false, "name": "Reel 2", "data":[
  	"<span class='glyphicon glyphicon-king'></span>",
    "<span class='glyphicon glyphicon-queen'></span>",
    "<span class='glyphicon glyphicon-bishop'></span>",
    "<span class='glyphicon glyphicon-knight'></span>",
    "<span class='glyphicon glyphicon-tower'></span>",
    "<span class='glyphicon glyphicon-pawn'></span>"
  ]},
  {"input": false, "name": "Reel 3", "data":[
    "<span class='glyphicon glyphicon-king'></span>",
    "<span class='glyphicon glyphicon-queen'></span>",
    "<span class='glyphicon glyphicon-bishop'></span>",
    "<span class='glyphicon glyphicon-knight'></span>",
    "<span class='glyphicon glyphicon-tower'></span>",
    "<span class='glyphicon glyphicon-pawn'></span>"
  ]}
]