Public Options

SamBrishes edited this page Nov 19, 2018 · 4 revisions

Public Options

Version LastUpdate

Default Options

All default options at a glance:

    tail.DateTime(".tail-datetime-field", {
        animate: true,                  // New in 0.4.0
        classNames: false,
        dateFormat: "YYYY-mm-dd",
        dateStart: false,               // New in 0.4.0
        dateRanges: [],                 // New Syntax in 0.4.0
        dateBlacklist: true,            // New in 0.4.0
        dateEnd: false,                 // New in 0.4.0
        locale: "en",                   // New in 0.4.0
        position: "bottom",
        rtl: "auto",                    // New in 0.4.1
        startOpen: false,
        stayOpen: false,
        timeFormat: "HH:ii:ss",
        timeHours: null,                // New in 0.4.0
        timeMinutes: null,              // New in 0.4.0
        timeSeconds: 0,                 // New in 0.4.0
        today: true,                    // New in 0.4.0
        tooltips: [],                   // New in 0.4.0
        viewDefault: "days",            // New in 0.4.0
        viewDecades: true,              // New in 0.4.0
        viewYears: true,                // New in 0.4.0
        viewMonths: true,               // New in 0.4.0
        viewDays: true,                 // New in 0.4.0
        weekStart: 0
    });

Options

animate

boolean
Set this option to false to disable the calendar (open / close) and tooltip (show / hide) animations. (Use true to enable these, which is the default).

classNames

boolean, string or array
This options adds additional classNames to the main tail.DateTime element. You can define your class names as string or as array, set this option to true to copy the class names of the source input field.

dateFormat

string or false
Pass an valid Date Format (as shown below) or pass false to disable the Date Picker.

dateStart

string, new Date() or integer
You can define a "start" Date from when the user can select dates. Pass a new Date() compatible string, a respective instance of this Object or just the respective time as integer. Keep this option to false to set no limitation!

dateRanges

array
This option can contain one ore more ranges of select- OR unselectable dates or days. Each range MUST be defined as object with the properties:

  • start Can be a String, Timestamp or Date() object.
  • end Can be a String, Timestamp or Date() object.
  • days Use true to use all days or pass an respective array with the "weekday" names [in english] or the associated numbers [0 = Sunday, ... 6 = Saturday].

IMPORTANT The old Array-Styled configuration pre-0.4.0 is NOT supported anymore!

Example

tail.DateTime("#tail-datetime", {
    dateRanges: [

        // Will Disable 05-JAN -> 07-JAN completely
        {
            start: new Date(2018, 0, 5),
            end: new Date(2018, 0, 7)
            /* days: true */                // This is the default
        },

        // Will Disable Each Sunday and Saturday in FEB
        {
            start: new Date(2018, 1, 1),
            end: new Date(2018, 1, 28),
            days: ["SUN", "SAT"]
        },

        // Will Disable Each Sunday and Saturday in General
        {
            days: ["SUN", "SAT"]
        }
    ]
});

dateBlacklist

boolean
The default value of this option will disable each date in each range within the dateRanges option above. Use false to use dateRanges as Whitelist: This will disable each date, EXCEPT these ones which are defined within the dateRanges. The dateStart and dateEnd options doesn't has any effect anymore, when you disable the dateBlacklist!

dateEnd

string, new Date() or integer
You can define a "end" Date to where a date can be selected. Pass a new Date() compatible string, a respective instance of this Object or just the respective time as integer. Keep this option to false to set no limitation!

locale

string
Pass a valid locale string (en, de, de_AT, es or ru), to change the respective language of the calendar interface. Note: You need to include the respective JavaScript language file to use the respective strings. (Check out the /langs/ directory to find all available languages)

position

string
This option will sets the position of the DateTime Calendar Interface. Use the directions "top", "left", "right" or "bottom" for an absolute position aligned by the source field, or pass an valid selector, which should be used as container for an static position.

rtl

boolean
Use true to show the DateTime Picker interface in a RTL-styled direction, use false to use the default LTR view and use "auto" to auto-detect the direction according to the used locale settings! ("auto" will use the RTL style on this locale strings: "ar", "he", "mdr", "sam" and "syr").

startOpen

boolean
Use true to show the DateTime Picker directly after the initialization.

stayOpen

boolean
Use true to keep the DateTime Picker open, even if an selection has been made or any other closing event has been triggered! (You can still close the DateTime Picker with the close() method!)

timeFormat

string or false
Pass an valid Time Format (as shown below) or pass false to disable the Time Picker.

timeHours

integer or null
This option can be used to define "default hours", which would be set directly after the initialization, just keep this option to null to use the current hour.

timeMinutes

integer or null
This option can be used to define "default minutes", which would be set directly after the initialization, just keep this option to null to use the current minutes.

timeSeconds

integer or null
This option can be used to define "default seconds", which would be set directly after the initialization. The default value already uses 0, pass null if you want to use the current seconds.

today

boolean
This option shows a small tick (circle) above the current day, month, year and decade. Use false to disable this small circle.

tooltips

array
This option can contain one or more date (and range-) specific tooltips. Each tooltip MUST be defined as Object with the following properties ("color" is optional):

  • date A single date as string, integer or new Date() instance for the tooltip. You can also define a range by using an array with 2 values [new Date(), new Date()].
  • text The respective tooltip text as STRING.
  • color The optional tooltip-tick background color as HEX STRING.

Example

tail.DateTime("#tail-datetime", {
    tooltips: [
        {
            date: "2018-01-01",
            text: "New Year",
            color: "#ff0000"
        }
    ]
});

viewDefault

string
This option will set the "default view" after the initialization of the Date/Time Picker. Use "days" (default), "months", "years" or "decades" and check also if this respective view isn't disabled (which isn't the default)!

viewDecades

boolean
Set this option to true to allow the user to access the "decades" view, use false (default) to dsiable this view!

viewYears

boolean
Set this option to true to allow the user to access the "years" view, use false (default) to dsiable this view!

viewMonths

boolean
Set this option to true to allow the user to access the "months" view, use false (default) to dsiable this view!

viewDays

boolean
Set this option to true to allow the user to access the "days" view, use false (default) to dsiable this view! I'm asking myself, while I writing this, why I added this option. It doesn't makes any sense to disable the view "days", because this is the only view where you can select an date. :/

weekStart

string or integer
This option will set the first day within the week. Use the English abbreviation for the desired "weekday" name or the associated number [0 = Sunday, 1 = Monday, ... 6 = Saturday]. The default is 0, so the week starts with Sunday.

Date/Time Values

Code Description
H 24-hour format of an hour, use HH for leading zeros!
G 12-hour format of an hour, use GG for leading zeros!
A Uppercase Ante meridiem and Post meridiem (AM or PM).
a Lowercase Ante meridiem and Post meridiem (am or pm).
i Minutes, use ii for leading zeros.
s Seconds, use ss for leading zeros.
Y A (4-digit) numeric representation of a year, used as YY or YYYY.
y A (2-digit) numeric representation of a year, used as yy.
m Numeric representation of a month, use mm for leading zeros.
M A short textual representation of a month, three letters.
F A full textual representation of a month, such as March.
d Day of the month, use dd for leading zeros.
D A textual representation of a day, three letters.
l (Lower L) A full textual representation of the day of the week.

Default Usage

Public Methods

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.