JTSageDateBox A multi-mode date and time picker

Themeing DateBox

This section is more of an attempt to explain what the "theme" system actually does - it is nothing more than an automatic class application. In these examples, you will see the defaults are usually:

  1. Based on bootstrap, as thats what the docs use
  2. Are something like "outline-primary"

This is because the bootstrap4 framework is based heavily on bootstrap Buttons. In most cases, the framework file is generating html with a class name of "btn btn-sm btn-" and then appending the "theme" name onto that. In this example, it would make the full class string "btn btn-sm btn-outline-primary". Of course, since this is just string concatnation, you can add as many extra classes as you like. For instance, the theme_cal_OutOfBounds is set to "outline-secondary border-0" to also remove the border on those buttons.

Icons

Icons in datebox are actually included (new in 5.0.0). You may pass a known instance name in any icon theme option, or, if you want a custom one, a SVG string.

Known icons:

Theme Options

These are all of the theme related options, a subset from the full options list.

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

This is an override only class, and should only be used when a single DateBox on a site needs a unique icon for some reason.
Default: false
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: no
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

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
Default: true
The default value of the option. Many options use "false" to disable them.
Data Type Expected: Boolean
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

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
Default: true
The default value of the option. Many options use "false" to disable them.
Data Type Expected: Boolean
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

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
Default: true
The default value of the option. Many options use "false" to disable them.
Data Type Expected: Boolean
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

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
Default: true
The default value of the option. Many options use "false" to disable them.
Data Type Expected: Boolean
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

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
Default: true
The default value of the option. Many options use "false" to disable them.
Data Type Expected: Boolean
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Class to add to disabled buttons

Default: disabled
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

String directing placement of inline control.

One of left, right, or center

Default: center
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

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

Default: false
The default value of the option. Many options use "false" to disable them.
Data Type Expected: Array
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

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
Default: true
The default value of the option. Many options use "false" to disable them.
Data Type Expected: Boolean
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

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
Default: true
The default value of the option. Many options use "false" to disable them.
Data Type Expected: Boolean
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Array of

  • Icon used on the clear button,
  • Theme class string added to the clear button
Default: [ "eraser", "outline-secondary" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

Array of

  • Icon class used on the close button,
  • Theme class string added to the close button
Default: [ "check", "outline-secondary" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

Array of

  • Icon class used on the cancel button
  • Theme class string added to the cancel button
Default: [ "times", "outline-secondary" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

Array of

  • Icon class used on the tomorrow button
  • Theme class string added to the tomorrow button
Default: [ "fast-forward", "outline-secondary" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

Array of

  • Icon class used on the today button
  • Theme class string added to the today button
Default: [ "step-forward", "outline-secondary" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

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

Default: bg-light border border-dark mt-1
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

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

Default: bg-light border border-dark p-2 m-0
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

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

Default: bg-light border border-dark my-2
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

Theme class added to the control header

Default: bg-dark
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

Array of

  • Icon class used for the control header close button
  • Theme class added to the control header close button
Default: [ "times", "outline-secondary" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

Theme class used for the open button

Default: secondary
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: no
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

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

Default: outline-info
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Class used to highlight days in highDays

Default: outline-warning
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Class used to highlight selected date is calHighSelected is on

Default: outline-success
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Class used to highlight dates in highDates

Default: outline-warning
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Class used to highlight dates in highDatesAlt

Default: outline-danger
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Class used to highlight dates in highDatesRec

Default: outline-warning
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

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

Default: outline-primary
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

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

Default: outline-secondary border-0
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Array of

  • Icon class used for next month button
  • Theme class added to the next month button
Default: [ "plus", "outline-dark" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Array of

  • Icon class used for previous month button
  • Theme class added to the previous month button
Default: [ "minus", "outline-dark" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Theme class added to the calbox pickers (jQM only)

Default: false
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Theme class added to the calbox datelist (jQM only)

Default: false
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): calbox
Operation mode(s) this option applies to

Array of

  • Icon class used for the next button
  • Theme class added to the next button
Default: [ "plus", "outline-dark" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimebox, durationbox
Operation mode(s) this option applies to

Array of

  • Icon class used for the previous button
  • Theme class added to the previous button
Default: [ "minus", "outline-dark" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimebox, durationbox
Operation mode(s) this option applies to

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

Default: false
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimebox, durationbox
Operation mode(s) this option applies to

Theme class added to the selected date

Default: success
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): flipbox, timeflipbox, datetimeflipbox
Operation mode(s) this option applies to

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

Default: light
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): flipbox, timeflipbox, datetimeflipbox
Operation mode(s) this option applies to

Theme class added to the invalid dates

Default: danger
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): flipbox, timeflipbox, datetimeflipbox
Operation mode(s) this option applies to

Height of the roller element in the control

Default: 135px
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): flipbox, timeflipbox, datetimeflipbox
Operation mode(s) this option applies to

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

Default: outline-info
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Class used to highlight days in highDays

Default: outline-warning
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Class used to highlight selected date is slideHighSelected is on

Default: outline-success
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Class used to highlight dates in highDates

Default: outline-warning
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Class used to highlight dates in highDatesAlt

Default: outline-danger
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Class used to highlight dates in highDatesRec

Default: outline-warning
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

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

Default: outline-primary
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Array of

  • Icon class used for next month button
  • Theme class added to the next month button
Default: [ "plus", "outline-dark border-0" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slide
Operation mode(s) this option applies to

Array of

  • Icon class used for previous month button
  • Theme class added to the previous month button
Default: [ "minus", "outline-dark border-0" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Array of

  • Icon class used for next week button
  • Theme class added to the next week button
Default: [ "next", "outline-dark border-0" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Array of

  • Icon class used for previous week button
  • Theme class added to the previous week button
Default: [ "prev", "outline-dark border-0" ]
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Theme class added to the slidebox pickers (jQM only)

Default: false
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

Theme class added to the slidebox datelist (jQM only)

Default: false
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): slidebox
Operation mode(s) this option applies to

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

Default: { position: 'fixed', left: 0, top: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0,0,0,.4)' }
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: yes
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

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

Default: false
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: no
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

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

Default: false
The default value of the option. Many options use "false" to disable them.
Data Type Expected: String
The datatype the option is expecting
Option is Dynamic: no
The option can be toggled or reset after the control has loaded
Valid Mode(s): datebox, timebox, datetimeflipbox, flipbox, timeflipbox, datetimeflipbox, slidebox, calbox
Operation mode(s) this option applies to

JTSage DateBox Documentation v.5.3.3