JTSageDateBox A multi-mode date and time picker

Dates selected must be after today's real date, or, all dates prior to today's date are invalid.

This is based on the first open of the widget - should a page be opened very close to midnight, an off-by one error might appear.

Note that 'this' in your function is the widget. argument[0] is a return value object, this starts on argument[1]

Option can be a function, or, a string reference to a function in the window object. Function is run on press of the open button ( or call to open DateBox)

Returning false from this function will prevent DateBox from opening.

Dates selected must be before today's real date, or, all dates after to today's date are invalid.

This is based on the first open of the widget - should a page be opened very close to midnight, an off-by one error might appear.

A list (array) of ISO-8601 (YYYY-MM-DD) dates that are to be considered invalid.

Processing order:

• enableDates ( If used, the list is exclusive )
• whiteDates ( Whitelisted dates will always pass )
• All date limiters, in a pile-on fashion

Example

// Christmas and New Years, 2000/2001
["2001-01-01", "2000-12-31", "2000-12-25", "2000-12-24"]

A list of recurring dates that are to be consided invalid.

Each date element is an array of the format

[<year>, <month>, <date>]

• year : 4 digit year
• month : 0 based month, (0 = January … 11= December )
• date : date

Additionally, using "-1" as an element treats it as a wildcard, that is "every year/month/day"

Processing order:

• enableDates ( If used, the list is exclusive )
• whiteDates ( Whitelisted dates will always pass )
• All date limiters, in a pile-on fashion

Example

// (Chrismas, Christmas Eve, New Years Eve, and New Years Day, Every Year)
[ [-1,0,1], [-1,11,31], [-1,11,25], [-1,11,24] ]

A list of periodic dates to blacklist.

Takes an array of the format

[<start date>, <period>]

• date : ISO-8601 start date
• period : integer, i.e 7 (weekly), 14 (bi-monthly)

Example

// (Every other wednesday)
[ "2019-09-11", 14 ]

A list (array) of days of the week that are to be considered invalid. Zero based ( 0 = Sunday … 6 = Saturday )

Processing order:

• enableDates ( If used, the list is exclusive )
• whiteDates ( Whitelisted dates will always pass )
• All date limiters, in a pile-on fashion

Example

// Weekends
[ 0, 6 ]

Window width below which the control should stretch to fill the screen

The class to be forcibly (overridden) passed to _styleFunctions.baseInputButton()

This option allows you to define a custom function that is called on the generated calbox grid box of each date.

It provides an object, and expects an object in the same format.

The object provided:

{
  // boolean ( true = date is invalid )
  bad: false,

  // javaScript date object for the date
  dateObj: [Object],

  // Text to display, typically just the number
  displayText: 6,

  // Object that click events run on.  Part of htmlObj
  eventObj: [Object],

  // If the date is invalid, set to the name of the rule that caused it
  failrule: false,

  // boolean ( true = date is valid )
  good: true,

  // jQuery object to be appended.
  htmlObj: [Object],

  // boolean ( false = Date is not part of the displayed month ( underrun / overrun ) )
  inBounds: false,

  // If the date is explicitly valid, set to the name of the rule that caused it
  passrule: false,

  // Theme to be applied to the htmlObj (already applied)
  theme: "outline-secondary border-0"
}

Example function:

window.printFullDate = function( myObject ) {
  console.log( myObject.dateObj );
  return myObject;
}

Then, to link it to datebox, it could be as easy as:

<input type="text" data-role="datebox" data-datebox-mode="calbox" data-datebox-calBeforeAppendFunc="printFullData">

When given a function, DateBox will run it. When given a string, it will run window.stringContents

Requirement

There must be an element with the ".dbEvent" class, this is how clicks are triggered. Additionally, that element should include the full object as it's $.data()

Note that the context of this function is the widget, same as for calFormatter.

List of 2-element arrays to show in a special pick list. Used with calShowDateList.

The inner array structure is:

[ISO-Date, Description]

Example

[ ["1980-04-25", "JT's Date of Birth"], ["1809-02-12", "Lincoln's Birthday"] ]

The header text for the calDateList special pick list.

This option allows for a function that should return the prefered text for the calendar grid date. Typically, it's just a number.

An object is passed to the function:

{
  // the theme class to be applied to the date
  theme    : [String]

  // The date is in the current month displayed.
  inBounds : [boolean]

  // True if the date is valid
  good     : [boolean],

  // True if the date is invalid
  bad      : [boolean],

  // Set to the rule that failed the date, or false
  failrule : [boolean|String],

  // Set to the rule that passed the date, or false.
  // Note: both failrule and passrule may be empty if the date passed by default (not explicitly)
  passrule : [boolean|String],

  // The current date being processed.
  dateObj  : [JavaScript Date Object]
}

The return value must be a string, but can contain HTML. For advanced formatting, consider using calBeforeAppendFunc instead.

Example function:

window.redSingles = function( obj ) {
  // Make single digit dates red
  if ( obj.dateObj.get(2) < 10 ) {
    return "<span style='color:red'>" + obj.dateObj.get(2) + "</span>";
  } else {
    return obj.dateObj.get(2);
  }
}

Then, to link it to datebox, it could be as easy as:

<input type="text" data-role="datebox" data-datebox-mode="calbox" data-datebox-calFormatter="redSingles">

When given a function, DateBox will run it. When given a string, it will run window.stringContents

Note that this function is run with a context of the widget. So you may call things like:

if ( this.isSelectedInCalGrid() ) { ... }

Rather than having to go back to the DOM element.

This is a parsed format for the header (if shown) in CalBox and SlideBox

For more information on date format variables, see the Output Formats section of the documentation

Highlight the dates that are not part of the displayed month with the theme in theme.cal_OutOfBounds

For more information on the themeing system, please see the Themeing section of the documentation

Precedence:

• OutOfBounds
• Selected
• Today
• highDates
• highDatesAlt
• highDatesRec
• highDays
• default

Highlight the currently selected date with the theme in theme_cal_Selected

For more information on the themeing system, please see the Themeing section of the documentation

Precedence:

• OutOfBounds
• Selected
• Today
• highDates
• highDatesAlt
• highDatesRec
• highDays
• default

Highlight today's date with the theme in theme.cal_Today

For more information on the themeing system, please see the Themeing section of the documentation

Precedence:

• OutOfBounds
• Selected
• Today
• highDates
• highDatesAlt
• highDatesRec
• highDays
• default

Highlight selected date with the theme in theme.cal_Selected

For more information on the themeing system, please see the Themeing section of the documentation

Precedence:

• OutOfBounds
• Selected
• Today
• highDates
• highDatesAlt
• highDatesRec
• highDays
• default

Highlight selected date (if out of bounds) with the theme in theme.cal_Selected

For more information on the themeing system, please see the Themeing section of the documentation

Precedence:

• OutOfBounds
• Selected
• Today
• highDates
• highDatesAlt
• highDatesRec
• highDays
• default

This option allows hiding of the standard calendar header (Month & Year, Previous / Next Buttons)

It is particularly useful when you want to replace it with calUsePickers

This option allows the hiding of the underrun / overrun dates from the previous and next month.

This is the on/off switch for the display of dates provided by calDateList

This is the on/off switch for day of the week labels (Short labels)

This is the on/off switch for ISO-8601 week numbers

Zero based start of the week. Tested heavily with 0 (Sunday) and 1 (Monday). ISO-8601 Week numbers are based on the first day displayed, so become meaningless with odd selections.

Show a month and year select box above the calendar grid. Often used with calNoHeader

This is the upper limit for the year select box.

Special cases:

• Integer > 1,800 : Hard coded year
• Integer < 1,800 : Number of years from current year or current selection.
• String "NOW" : Today's year

See also: calYearPickRelative

This is the lower limit for the year select box.

Special cases:

• Integer > 1,800 : Hard coded year
• Integer < 1,800 : Number of years from current year or current selection.
• String "NOW" : Today's year

See also: calYearPickRelative

When true, the year picker min/max are relative to the currently visible date

When false, the year picker min/max are relative to today's year

The text label for the clear button

Almost always click now. Older mobile implementations may require others.

Option can be a function, or, a string reference to a function in the window object.

The first argument to the function will be an object containing:

• date : The JavaScript date object of the current (choosen) date - Always defined, even if meaningless.
• initDate : The JavaScript date object that holds the widget creation time/date. Always defined.
• duration : The last entered duration, in seconds for duration modes - undefined if not.
• cancelClose : [Close only] - If the close action was triggered by a user cancel (true), or by setting the date (false)

For more information, please see the Callbacks and Listeners section of the documentation.

Note that 'this' in your function is the widget. argument[0] is a return value object, this starts on argument[1]

For more information, please see the Callbacks and Listeners section of the documentation.

This will cause the button that selects "today" to also close the control.

This will cause the button that selects "tomorrow" to also close the control.

Preferred width of the control. See also breakpointWidth

Added to the style block in the head. " !important", if nessesary for the framework

Capitalizing "M" for month in "datebox" mode will enable string representations (short months) instead.

Note that this will break for any locale where the short string of two months is identical.

For more information on date format variables, see the Date Formats documentation section.

Capitalizing "M" for month in "datebox" mode will enable string representations (short months) instead.

Note that this will break for any locale where the short string of two months is identical.

For more information on date and time format variables, see the Date Formats documentation section.

Typically, this type of return isn't based on locale, more on the format your backend is expecting. It appears in the i18n settings for ease of site-specific i18n customization.

Days of the week, in an array, full text

Days of the week, in an array, shortened text

Note that if you are relying on short day names to read a date back in (very rare, as there is almost always a more granular option available), and there are duplicates in this list (i.e. array('S,'M','T','W','T'…) ) the parser will likely behave very strangely.

Set the default date value, or time value. Many options exist for supplying the date:

Date Modes:

defaultValue: new Date(2001,0,1,0,0,0,0); // Date Object (Jan 1, 2001)
defaultValue: [2001,0,1];   // Array (Jan 1, 2001)
defaultValue: "2001-01-01"; // ISO Date String (Jan 1, 2001)
defaultValue: "+86400";     // Offset (+ or -) a number of SECONDS from today (86400 == 1 day)
defaultValue: 978307200;    // Number (Epoch) (Jan 1, 2001 GMT !SEE NOTE1!)

Time Modes:

defaultValue: new Date(2001,0,1,15,30,0,0); // Date Object (3:30:00 PM)
defaultValue: [15,30,0];  // Array (3:30:00 PM)
defaultValue: "15:30";    // String (3:30:00 PM)
defaultValue: "15:30:00"; // String with Seconds (3:30:00 PM)
defaultValue: "+86400";   // Offset (+ or -) a number of SECONDS from today (86400 == 1 day)
defaultValue: 55800;      // Number (Epoch) (3:30:00 PM GMT, !SEE NOTE1!)

Duration Modes:

defaultValue: 3600; // Number of seconds (60 Minutes)

Note 0: Be Specific!

When choosing a format to use, be as specific as your data will allow you to be. A Date object is a date object - it's inturpreted on the client maching, and it will be "right". Failing that, the array constructor just passes those values on to a new Date(). Use the string constructor as a last resort - even a simple typo in the string format will cause the defaultValue parser to fail, which drops the defaultValue === Today's Date, NOW().

Note 1: Don't Use Epoch!

A small note about epoch - great pains have been made to make DateBox rather timezone agnostic. It rarely has to care, and when it does, it tends to fail pretty much silently. (a/n: This really only crops up for people who observe DST, and then, it will only show up in time modes, or duration modes if you are working with large numbers). That said, if you supply epoch, it is not based on UTC, but the local timezone. If you have already done the math serverside, great. If not, and you absolutly must store your dates this way, a good way to convert back is:

myDate = new Date();
myDate.setUTCSeconds( epoch );

Note 2: Re-using defaultValue

defaultValue is only read when the input element is empty. If you need to change the date, setTheDate() is much more effective.

Set to true to not bind the to the mousewheel

Class to add to disabled buttons

The opening method to use to display the control

• dropdown
  • Display the control as a popover attached to the input (default)
• inline
  • Display the control inline in the page, under the input, always visible
• blind
  • Display the control inline in the page, under the input, sliding up and down
• modal
  • Display the control in a full window modal

String directing placement of dropdown.

Options: topLeft, topMiddle, topRight, centerLeft, centerMiddle, centerRight, bottomLeft, bottomMiddle, bottomRight

Where the first term is vertical, the second is horizontal.

String directing placement of inline control.

One of left, right, or center

Takes an array of [ top, left ], expected in px, or any value that the jQuery .css() function will accept.

When true, clicking on the greyed out background around the control will close it. Applies to modal and dropdown display methods only.

When true, pressing the escape while a control is open will close it. Applies to modal and dropdown display methods only.

Pluralization of Day/Days. (1 Day, 2 Days).

Very simplistic, for instance, there is no support for 0 Days. Nor any other cases in different locales that don't follow the english method of pluralization.

For more information on date and time format variables, see the Date Formats documentation section.

Array of labels for the duration inputs - Days, Hours, Minutes, Seconds

Controls which order the duration elements appear in, and if they appear at all.

Note: if you omit elements, be sure to change durationFormat or you may get odd results

• d : Days
• h : Hours
• i : Minutes
• s : Seconds

This will set the stepper for the most precise time measurement shown in your duration control. By default, this is seconds - however, if you play with durationFieldOrder, it could be any field up to and including days.

Example:

overrideDurationFieldOrder = ['d','h'];
durationStep = 2;

In this case, "hours" would be stepped (by 2 hours), as it is the least precise element shown.

Array of ISO-8601 (YYYY-MM-DD) dates that are exclusively valid and all others should be disabled. If this is in use, no other date checks are performed.

Processing order:

• enableDates ( If used, the list is exclusive )
• whiteDates ( Whitelisted dates will always pass )
• All date limiters, in a pile-on fashion

Example

// Christmas, Christmas Eve, and New Years Eve of 2000 exclusively
[ "2000-12-31", "2000-12-25", "2000-12-24" ]

This is the half the number of elements in the flip roller

Full size = ( * 2 ) + 1

Defaults should be fine on most screens, unless maybe you are setting up an oddly proportioned kiosk or something.

An adjustment, in pixels to move the lens on the flipbox modes, after the calculation to find center.

Sometimes, external themes don't play nicely and you'll need a few pixels either way - in particular, the default bootstrap4 theme needs 5 pixels positive (hardcoded), while most of the 3rd party color themes for bootstrap4 do not require any movement (set it to zero).

Some frameworks do not play nicely with the DOM (jQM, I'm looking at you), and the calculation to get how tall each of the flipbox items are returns a value not even close to reality. This allows you to override that number so that dragging the roller tracks as expected.

Natural sort is the backwards one. Sliding the roller down adds to the control, up subtracts.

Natural sort makes a good bit of sense for duration modes, less so for dates, but it's very much a personal preference.

The default is the string "default" - which will turn it on for duration, off for everything else. Setting to true will force it on, false will force it off.

When true, allow the widget header to be replaced by the label text. Precedence is

• options.overrideDialogLabel
• <input> placeholder attr (headerFollowsPlaceholder)
• <input> title attr (headerFollowsTitle)
• <label> text (with proper for attr) (headerFollowsLabel)
• i18n.titleDateDialogLabel / i18n.titleTimeDialogLabel (mode dependant)

When true, allow the widget header to be replaced by the placeholder attribute. Precedence is

• options.overrideDialogLabel
• <input> placeholder attr (headerFollowsPlaceholder)
• <input> title attr (headerFollowsTitle)
• <label> text (with proper for attr) (headerFollowsLabel)
• i18n.titleDateDialogLabel / i18n.titleTimeDialogLabel (mode dependant)

When true, allow the widget header to be replaced by the title attribute. Precedence is

• options.overrideDialogLabel
• <input> placeholder attr (headerFollowsPlaceholder)
• <input> title attr (headerFollowsTitle)
• <label> text (with proper for attr) (headerFollowsLabel)
• i18n.titleDateDialogLabel / i18n.titleTimeDialogLabel (mode dependant)

The header is displayed inside the control, just above the adjustment controls.

For more information on date format variables, see the Output Formats section of the documentation

Cause the original input to be hidden on the page. (Including the lable if possible)

Works with inline, blind and modal. Unpredictable on dropdown display.

An alternate list of dates to highlight with theme.cal_DateHighAlt

Example

```js // December 2000 Holiday Seson ["2001-01-01", "2000-12-31", "2000-12-25", "2000-12-24"]

An list of dates to highlight with theme.cal_DateHigh

Example

```js // December 2000 Holiday Seson ["2001-01-01", "2000-12-31", "2000-12-25", "2000-12-24"]

A list of recurring dates to highlight with theme.cal_DateHighRec

Each date element is an array of the format

[<year>, <month>, <date>]

• year : 4 digit year
• month : 0 based month, (0 = January … 11= December )
• date : date

Additionally, using "-1" as an element treats it as a wildcard, that is "every year/month/day"

Example

// (Chrismas, Christmas Eve, New Years Eve, and New Years Day, Every Year)
[ [-1,0,1], [-1,11,31], [-1,11,25], [-1,11,24] ]

A list of periodic dates to highlight with theme.cal_DateHighRec

Takes an array of the format

[<start date>, <period>]

• date : ISO-8601 start date
• period : integer, i.e 7 (weekly), 14 (bi-monthly)

Example

// (Every other wednesday)
[ "2019-09-11", 14 ]

A list (array) of days of the week that are to be highlighted with theme.cal_DayHigh.

Zero based ( 0 = Sunday … 6 = Saturday )

Example

// Weekends
[ 0, 6 ]

This provides an convient way to override the built in icons. It recieves a single argument, which it the value of the icon portion of the theme setting.

Example - FontAwesome

iconFactory : function ( icnName ) {
  return "<i class=\"fa fa-" + icnName + "\"></i>";
}

This does not get tested as well as it should. Please, if you are a native speaker of any of the languages that use this flag, give the maintainer / author a shout about all of the places he forgot to check this flag and reorder the display. Or maybe all the places where he did and it makes no sense to do it.

This can be any valid format string that linkedField will be populated with. The default value is the format that .toJSON() returns.

note: this default format includes a 'Z' - it stands for "Zulu Time", a.k.a. "GMT", a.k.a. "UTC" - it is the single instance of DateBox doing any time zone processing, it does translate the date and time to GMT. PHP only mostly understands ISO-8601, other languages do better. Backend node.js would be very happy with this format. That said, if you have not otherwise handled time zones in your application, please, please, please do not use the default setting. Note also this is relying on the useragent to have a correctly implemented toJSON - which should be there, but…

This is a jQuery selector of the field(s) that you want to fill with the selected date when chosen. Uses linkedFieldFormat as the format. Often used with a hidden form element to simplify backend date processing.

Alternativle, it can be passed an object of multiple fields, in the form of:

[ { id: "#someInput", format: "someFormat" }, … ]

Set the readonly property of the original input, allowing changes via the datebox contol only

These are not used in most of the world. Either they never existed, or the country has since switched to 24 hour time.

ISO string minimum date (YYYY-MM-DD) (Inclusive!)

ISO string maximum date (YYYY-MM-DD) (Inclusive!)

Only accept dates that are today - # of days in the future (min).

Both options will accept negative numbers:

minDays = 10
maxDays = -5

This would allow only days that are 5 to 10 days in the past to be choosen.

Only accept dates that are today + # of days in the future (max)

Both options will accept negative numbers:

minDays = 10
maxDays = -5

This would allow only days that are 5 to 10 days in the past to be choosen.

Do not allow durations less (min) or greater (max) than this to be selected.

Do not allow durations less (min) or greater (max) than this to be selected.

Allow only hours before (min) or after (max) this to be selected.

Allow only hours before (min) or after (max) this to be selected.

Allow only times before (min) or after (max) this to be selected. Format is 24hr clock - i.e. 18:31

Note: this limits date selection to TODAY (datetime modes).

Allow only times before (min) or after (max) this to be selected. Format is 24hr clock - i.e. 18:31

Note: this limits date selection to TODAY (datetime modes).

Do not allow years before (min) or after (max) this one to be selected.

Do not allow years before (min) or after (max) this one to be selected.

Step the minute control by this amount. Common values are 5, 10, 15, or 30.

Control rounding of minutes when an invalid minute is entered. That is, minuteStep=5 and you enter 3 direct to the element

• -1 : Down
• 1 : Up
• 0 : "Standard Rounding"

The mode of operation - see list of available modes below.

• datebox
  • Control allows input of date using multiple inputs with +/- buttons
• timebox
  • Control allows input of time using multiple inputs with +/- buttons
• datetimebox
  • Control allows input of date & time using multiple inputs with +/- buttons
• calbox
  • Control allows input of date using a calendar grid
• flipbox
  • Control allows input of date using draggable columns
• timeflipbox
  • Control allows input of time using draggable columns
• datetimeflipbox
  • Control allows input of date & time using draggable columns
• slidebox
  • Control allows input of date using draggable rows
• durationbox
  • Control allows input of duration using multiple inputs with +/- buttons
• durationflipbox
  • Control allows input of duration using draggable columns

List of the months of the year, zero based, full text

When using short months as output (and input), make sure that there are 12 unique short names. If you use too shot of an abbreviation (ex. Ju = June, Ju = July), not only is your outputted date ambiguous to the user, it also cannot be reliably re-read by DateBox.

Tooltip (title) for next and previous buttons. Usually "Next Month" or similar.

Allows those dates that are not the true value of the client's today (new Date(); at widget open) to be selected.

Note: if used with time only modes, this will break them.

Option can be a function, or, a string reference to a function in the window object.

Additionally, if this returns false, the DateBox control will immediatally close.

The first argument to the function will be an object containing:

• date : The JavaScript date object of the current (choosen) date - Always defined, even if meaningless.
• initDate : The JavaScript date object that holds the widget creation time/date. Always defined.
• duration : The last entered duration, in seconds for duration modes - undefined if not.
• cancelClose : [Close only] - If the close action was triggered by a user cancel (true), or by setting the date (false)

For more information, please see the Callbacks and Listeners section of the documentation.

Note that 'this' in your function is the widget.

argument[0] is a return value object, this starts on argument[1]

For more information, please see the Callbacks and Listeners section of the documentation.

Allow rollover on a per-element basis. i.e. - December + 1 = January of next year

This option can only be supplied as a function. It will recieve an object containing:

• oldDate - the Date that existed prior to the control closing. The internal date
• origDate - last confirmed, good, user set date. Does not reflect changes in the control prior to a set button being clicked.
• newDate - should the input be re-read, this is the date the control thinks it is.
• isGood - the input was be succesfully processed
• isBad - the input was NOT be succesfully processed
• input - Value of the input

The function return either:

• A new date OBJECT to set the control today.

OR

• false ( in fact, anything other than an object), meaning that the date is fine - and DateBox should use the value of newDate instead.

Sample:

function( obj ) {
  if ( obj.isGood ) {
    // Good date parsed, do nothing.
    return false;
  }

  var newd = chrono.parseDate(obj.input);

  if ( newd === null ) {
    return new Date();
  } else {
    return newd;
  }
}

For more information, please see the Callbacks and Listeners section of the documentation.

It'd be a bad idea to turn this off. With it off, unreadable dates will set the internal date to "today", but will not update the input.

runOnBlurCallback ignores (bypasses) this option. It won't do both.

The only reason to shut this down would be on legacy code where you are doing this yourself somehow.

Text only, usaully "Set Date"

Text only, usually "Set Duration"

Text only, usually "Set Time"

Auto-fill the input on datebox initialization - this will take into account any default value options

This is half the number of elements in the slide roller, minus one (the centered element).

Highlight today's date with the theme in theme_slide_Today

For more information on the themeing system, please see the Themeing section of the documentation

Precedence:

• OutOfBounds
• Selected
• Today
• highDates
• highDatesAlt
• highDatesRec
• highDays
• default

Highlight the currently selected date with the theme in theme_slide_Selected

For more information on the themeing system, please see the Themeing section of the documentation

Precedence:

• OutOfBounds
• Selected
• Today
• highDates
• highDatesAlt
• highDatesRec
• highDays
• default

Show a month and year select box above the slide grid. Often used with slideNoHeader

This option allows hiding of the standard calendar header (Month & Year, Previous / Next Buttons)

It is particularly useful when you want to replace it with slideUsePickers

This is the upper limit for the year select box.

Special cases:

• Integer > 1,800 : Hard coded year
• Integer < 1,800 : Number of years from current year or current selection.
• String "NOW" : Today's year

See also: calYearPickRelative

This is the lower limit for the year select box.

Special cases:

• Integer > 1,800 : Hard coded year
• Integer < 1,800 : Number of years from current year or current selection.
• String "NOW" : Today's year

See also: calYearPickRelative

When true, the year picker min/max are relative to the currently visible date

When false, the year picker min/max are relative to today's year

List of 2-element arrays to show in a special pick list. Used with slideShowDateList.

The inner array structure is:

[ISO-Date, Description]

Example

[ ["1980-04-25", "JT's Date of Birth"], ["1809-02-12", "Lincoln's Birthday"] ]

This is the on/off switch for the display of dates provided by slideDateList

Offset the start day by X number of days, months, or years

This value will be added to 'defaultValue' if it is supplied

Array of

• Icon used on the clear button,
• Theme class string added to the clear button

Array of

• Icon class used on the close button,
• Theme class string added to the close button

Array of

• Icon class used on the cancel button
• Theme class string added to the cancel button

Array of

• Icon class used on the tomorrow button
• Theme class string added to the tomorrow button

Array of

• Icon class used on the today button
• Theme class string added to the today button

Class string added to the datebox container when using the dropdown method

Class string added to the datebox container when using the modal method

Class string added to the datebox container when using the inline or blind method

Theme class added to the control header

Array of

• Icon class used for the control header close button
• Theme class added to the control header close button

Theme class used for the open button

Class used to highlight today's date when calHighToday is on

Class used to highlight days in highDays

Class used to highlight selected date is calHighSelected is on

Class used to highlight dates in highDates

Class used to highlight dates in highDatesAlt

Class used to highlight dates in highDatesRec

Class used by default on all dates, unless another is more appropriate

Class used to highlight (or lowlight) those dates outside of the currently dispalyed month, if calOnlyMonth is off

Array of

• Icon class used for next month button
• Theme class added to the next month button

Array of

• Icon class used for previous month button
• Theme class added to the previous month button

Theme class added to the calbox pickers (jQM only)

Theme class added to the calbox datelist (jQM only)

Array of

• Icon class used for the next button
• Theme class added to the next button

Array of

• Icon class used for the previous button
• Theme class added to the previous button

Theme class added to the datebox inputs. Applicable to jQM only.

Theme class added to the selected date

Theme class added to all dates (unless something else applys)

Theme class added to the invalid dates

Height of the roller element in the control

Class used to highlight today's date when slideHighToday is on

Class used to highlight days in highDays

Class used to highlight selected date is slideHighSelected is on

Class used to highlight dates in highDates

Class used to highlight dates in highDatesAlt

Class used to highlight dates in highDatesRec

Class used by default on all dates, unless another is more appropriate

Array of

• Icon class used for next month button
• Theme class added to the next month button

Array of

• Icon class used for previous month button
• Theme class added to the previous month button

Array of

• Icon class used for next week button
• Theme class added to the next week button

Array of

• Icon class used for previous week button
• Theme class added to the previous week button

Theme class added to the slidebox pickers (jQM only)

Theme class added to the slidebox datelist (jQM only)

CSS style string used for the modal and dropdown method displays.

Some frameworks require some extra styles. This helps move away from a largely depreciated CSS file

Some frameworks require some extra styles. This helps move away from a largely depreciated CSS file

Typically this is the array [ "h", "i", "a" ] or [ "h", "i" ]

Fields:

• h : Hours
• i : Minutes
• a : Meridiem

Valid options are 12 and 24. This controls what is seen and used for the input controls, not the output format. To change the output format of the time, please see timeOutput.

For more information on date format variables, see the Date Formats documentation section.

Fall-back when there is no associated label element

Fall-back when there is no associated label element

This began life as a CalBox only option, and still retains that name. However, it is used in all modes now.

This began life as a CalBox only option, and still retains that name. However, it is used in all modes now.

Tooltip (title) for the open button on the original input

This sets where the century change happens. By default, it is 38, that is, 2 digit years before 38 will be assumed to refer to 2000-2037, and years after will be assumed to refere to 1938-1999.

If _afterToday is true, all years are assumed to be 20XX. The same would be true if this were set to 100+

Obviously, this has no bearing if you do not force usage of 2 digit dates.

This is the only other numeral system I've found in use on the web.

Display an open button inside or alongside the input element that will open the control

The cancel button allows you the close the control without setting the date or time.

The clear button allows you the clear the original input. It basically "unsets" the date/time

Attempt to merge today, tomorrow, clear, close, and set buttons into a single line

Open datebox control when input element is focused (and disable button)

This refers to the header with the close button and the title.

This is particularly useful with non-setting modes (datebox for instance) coupled with inline displays

Selects the current active langauge. If a language string is not found, it will fall back on the string in the "default" languge, or return "undefined" (as a String).

Auto-fill the placeholder text from the input element's label if set to true. Or, set to a string and it will use that text to set the placeholder

This button both sets the date, and closes the control.

This button will "select" today, but it will not "set" today. It is for quick navigation.

This button will "select" tomorrow, but it will not "set" tomorrow. It is for quick navigation.

Array of valid hours to choose (24hr based)

Example

// Standard working hours
[ 9, 10, 11, 12, 13, 14, 15, 16, 17 ]

A list (array) of ISO-8601 (YYYY-MM-DD) dates that are to be considered valid always.

Processing order:

• enableDates ( If used, the list is exclusive )
• whiteDates ( Whitelisted dates will always pass )
• All date limiters, in a pile-on fashion

Example

// Christmas and New Years, 2000/2001
["2001-01-01", "2000-12-31", "2000-12-25", "2000-12-24"]

The Zindex to use for the datebox control. If applicable, there is a full-screen overlay behind the control at zIndex-1