Your First Datebox
Adding a datebox is as simple as adding a data-role to a date or text input element and specifying the “mode” you wish to use.
<input type="text" data-role="datebox" data-options='{"mode":"calbox"}'>Configuration
The "data-options" Object
The data-options attribue of the input will be your best and worst friend - all configuration of datebox can be done with this object (alternatively, you can do it pogrammatically or with defaults too). It is important the the object itself be enclosed in single quotes, while each string inside of the object be double quoted. It can work the other way on some browsers, but not all, and I've yet to find one where this method fails.
Why "data-options"?
DateBox expects the "data-options" attribute to be well formed JSON. As nearly every backend language allows simple export to a JSON object (node.js, PHP, etc), this allows you to store your per-instance options in something other than a string.
What about “long” options?
Another option is to use “long” options. For instance, to set the mode, you would set the “data-datebox-mode” attribute. Camel case becomes dashes, i.e:
afterToday => data-datebox-after-today
Options defined in this fashion will not take precedence over options defined in “data-options”.
How about with a constructor?
This method of working is also certainally possible. When using it, do not set a data-role on the input - also, using type=”text” is important, as datebox will be unable to degrade the input otherwise.
<div><input id="someinput" type="text"></div>Then, to enhance it, call datebox() in a script:
$('#someinput').datebox({
mode: "calbox",
afterToday: true,
// ...etc...
});This of course makes re-using variables a bit easy, as variables are expanded.