There are a number of ways to configure DateBox. Not all of them are created equally. This will cover all of the options. All examples show a "calbox" that allows choosing a date only within 10 days of today.
There are far to many options to cover in the course of this document - have a look at the Full Options List or the Options Demos for a complete list.
The most used on this documentation site is the data-options attribute. This is well-formed json encapsulated in the data-options attribute of the input element. Because it must be truly well-formed, you'll need to surroud the json with single quotes.
<input type="text" data-role="datebox" data-options='{"mode":"calbox", "maxDays": 10, "minDays": 10}'>
Another option for options is convert them to long style attribute names. Camel case becomes a dash, and is prefixed with "data-datebox-". So,
<input type="text" data-role="datebox" data-datebox-mode="calbox" data-datebox-max-days="10" data-datebox-min-days="10">
If you want to change the defaults on multiple dateboxes, overloading the prototype might be a better option. Sometime after DateBox is loaded, something like this will do it:
jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
mode: "calbox",
maxDays: 10,
minDays: 10
});
If you prefer to initialize DateBox yourself, you can omit the data-role="datebox" attribute, and call DateBox directly on the input element to enhance. This does not preclude the first 2 methods above, they will still be read. Note that this method may be the easiest if you wish to run a lot of callbacks, as you don't have to either serialize them, or call them by reference.
<div><input id="someinput" type="text"></div>
Then, to enhance it, call datebox() in a script:
$('#someinput').datebox({
mode: "calbox",
maxDays: 10,
minDays: 10
});
Only one option is actually required, mode
It can be any of:
Additionally, you may want to override the default on displayMode. It can be the following