JTSageDateBox A multi-mode date and time picker

Configuration

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.

data-options HTML attribute.

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.

Example
<input type="text" data-role="datebox" data-options='{"mode":"calbox", "maxDays": 10, "minDays": 10}'>

Long style attribute options

Another option for options is convert them to long style attribute names. Camel case becomes a dash, and is prefixed with "data-datebox-". So,

Example
<input type="text" data-role="datebox" data-datebox-mode="calbox" data-datebox-max-days="10" data-datebox-min-days="10">

Overloading the prototype

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:

Example
jQuery.extend(jQuery.jtsage.datebox.prototype.options, {
    mode: "calbox",
    maxDays: 10,
    minDays: 10
});

Using the constructor

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
});

Required Options

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

JTSage DateBox Documentation v.5.1.0