Plugins allow you to extend the picker by adding new functionality to either Tempus Dominus globally, - the plugin or by overwritting existing functionality. Check the events tab to see the logs. + the plugin or by overwriting existing functionality. Check the events tab to see the logs.
+ Click to view the code and the log. + Clicking the buttons below will log the results there. +
+ +
+
+ <div
+ class='input-group'
+ id='pickerFunctions'
+ data-td-target-input='nearest'
+ data-td-target-toggle='nearest'
+ >
+ <input
+ id='pickerFunctionsInput'
+ type='text'
+ class='form-control'
+ data-td-target='#pickerFunctions'
+ />
+ <span
+ class='input-group-text'
+ data-td-target='#pickerFunctions'
+ data-td-toggle='datetimepicker'
+ >
+ <span class='fa-solid fa-calendar'></span>
+ </span>
+ </div>
+
+
+
+
+ new tempusDominus.TempusDominus(document.getElementById('pickerFunctions'));
+
+
+
picker.viewDate
returns the pickers current view date.
@@ -62,28 +62,28 @@
Returns an array of DateTime
of the selected date(s).
Returns the last picked DateTime
of the selected date(s).
Returns the length of picked dates -1 or 0 if none are selected.
@@ -94,7 +94,7 @@
@@ -102,7 +102,7 @@
@@ -111,8 +111,16 @@
+ Parse the value into a DateTime object. This can be overwritten to supply your own parsing. +
+@@ -124,7 +132,7 @@
@@ -133,7 +141,7 @@
@@ -142,7 +150,7 @@
@@ -159,7 +167,7 @@
@@ -178,7 +186,7 @@
Shows the widget
Hides the widget
Destroys the widget and removes all attached event listeners. If the picker is open it will be hidden and the event fired.
Disables the input element and the component is attached to, by adding a disabled="true"
attribute
@@ -258,7 +266,7 @@
Enables the input element and the component is attached to, by removing disabled
attribute from
it.
@@ -266,13 +274,13 @@
Clears all selected dates. This is a short cut to picker.dates.clear()
Instead of adding event listeners to the pickers element, you can use the subscribe method. You can provide diff --git a/src/docs/partials/namespace/css.html b/src/docs/partials/namespace/css.html index 70154af72..baad030f3 100644 --- a/src/docs/partials/namespace/css.html +++ b/src/docs/partials/namespace/css.html @@ -3,212 +3,212 @@ The picker uses the following css classes to style the picker.
The outer element for the widget.
-The element for the calendar view header, next and previous actions.
-The element for the action to change the calendar view. E.g. month -> year.
-Applied to the widget element when the side by side option is in use.
-The element for the action to change the calendar view, e.g. August -> July
-The element for the action to change the calendar view, e.g. August -> September
-Applied to any action that would violate any restriction options. ALso applied to an input field if the disabled function is called.
-Applied to any date that is less than requested view, e.g. the last day of the previous month.
-Applied to any date that is greater than of requested view, e.g. the last day of the previous month.
-Applied to any date that is currently selected.
-The outer most element for the calendar view.
-The outer most element for the decades view.
-Applied to elements within the decades container, e.g. 2020, 2030
-The outer most element for the years view.
-Applied to elements within the years container, e.g. 2021, 2021
-The outer most element for the month view.
-Applied to elements within the month container, e.g. January, February
-The outer most element for the calendar view.
-Applied to elements within the day container, e.g. 1, 2..31
-If display.calendarWeeks is enabled, a column displaying the week of year is shown. This class is applied to each cell in that column.
-Applied to the first row of the calendar view, e.g. Sunday, Monday
-Applied to the current date on the calendar view.
-Applied to the locale's weekend dates on the calendar view, e.g. Sunday, Saturday
-The outer most element for all time related elements.
-Applied the separator columns between time elements, e.g. hour *:* minute *:* second
-The outer most element for the clock view.
-The outer most element for the hours selection view.
-The outer most element for the minutes selection view.
-The outer most element for the seconds selection view.
-Applied to each element in the hours selection view.
-Applied to each element in the minutes selection view.
-Applied to each element in the seconds selection view.
-Applied the element of the current view mode, e.g. calendar or clock.
-Applied to the currently showing view mode during a transition between calendar and clock views
-Applied to the currently hidden view mode.
-Applied to the widget when the option display.inline is enabled. diff --git a/src/docs/partials/namespace/errors.html b/src/docs/partials/namespace/errors.html index 3f232e450..18b70c7fc 100644 --- a/src/docs/partials/namespace/errors.html +++ b/src/docs/partials/namespace/errors.html @@ -11,21 +11,21 @@
An error indicating that a key in the options object is invalid.
-An error indicating that one more keys in the options object is invalid.
-@@ -43,7 +43,7 @@
@@ -51,7 +51,7 @@
@@ -59,14 +59,14 @@
An error when an element to attach to was not provided in the constructor.
-@@ -74,7 +74,7 @@
Logs a warning if a date option value is provided as a string, instead of @@ -94,7 +94,7 @@
@@ -103,7 +103,7 @@
diff --git a/src/docs/partials/namespace/events.html b/src/docs/partials/namespace/events.html index 2cd6d6080..7d71b8a23 100644 --- a/src/docs/partials/namespace/events.html +++ b/src/docs/partials/namespace/events.html @@ -16,7 +16,7 @@ } -
Emit when the date selection is changed. @@ -31,7 +31,7 @@
Emits when the view changes for example from month view to the year view. @@ -43,7 +43,7 @@
Emits when a selected date or value from the input field fails to meet the provided validation rules. @@ -57,12 +57,12 @@
Emits when then picker widget is displayed.
-
Emits when the picker widget is hidden.
diff --git a/src/docs/partials/options.html b/src/docs/partials/options.html
index 4776a71c4..cccd4ba63 100644
--- a/src/docs/partials/options.html
+++ b/src/docs/partials/options.html
@@ -1,121 +1,134 @@
- Options can be provided during the inital setup through the constructor
- Options can be updated through the
- All options will throw typeMismatch if the
- provided type
- does not match the expected type, e.g. a string instead of a boolean.
-
- Accepts: string | Date | DateTime Defaults: undefined
- Throws conflictingConfiguration if value is
- after maxDate.
-
- Accepts: string | Date | DateTime Defaults: undefined
- Throws conflictingConfiguration if value is
- after maxDate.
-
- Allows the user to select only from the provided days. Setting this takes precedence over
- options.minDate,
- options.maxDate configuration.
-
- Disallows the user to select any of the provided days. Setting this takes precedence over
- options.minDate,
- options.maxDate configuration.
-
- Throws numbersOutOfRage any value is not between 0-23
-
- Allows the user to select only from the provided hours.
-
- Disallows the user to select any of the provided hours.
-
+ Options can be provided during the inital setup through the constructor
+ Options can be updated through the
+ All options will throw typeMismatch if the
+ provided type
+ does not match the expected type, e.g. a string instead of a boolean.
+
- Accepts: array of an object with from: DateTime, to: DateTime Defaults:
- undefined
+ Accepts: string | Date | DateTime Defaults: undefined
+ Throws conflictingConfiguration
+ if value is
+ after maxDate.
+
+ Accepts: string | Date | DateTime Defaults: undefined
+ Throws conflictingConfiguration
+ if value is
+ after maxDate.
+
+ Allows the user to select only from the provided days. Setting this takes precedence
+ over
+ options.minDate,
+ options.maxDate configuration.
+
+ Disallows the user to select any of the provided days. Setting this takes precedence
+ over
+ options.minDate,
+ options.maxDate configuration.
+
+ Throws numbersOutOfRage any value is
+ not between 0-23
+
+ Allows the user to select only from the provided hours.
+
+ Disallows the user to select any of the provided hours.
+
+ Accepts: array of an object with from: DateTime, to: DateTime
+ Defaults:
+ undefined
- Accepts: array of numbers from 0-6
- Throws numbersOutOfRage any value is not between 0-6.
-
- Accepts: 'top' | 'bottom' Defaults: bottom
- Throws unexpectedOptionValue if value is not one
- of the accepted values.
-
+ Accepts: array of numbers from 0-6
+ Throws numbersOutOfRage any value is not
+ between 0-6.
+ Accepts: true|false
- These options turns on or off the particular views. If option is false for
- Defaults: true
- Defaults: true
- Defaults: true
- Defaults: true
- Defaults: true
-
-
- Defaults: true
- Defaults: true
- Defaults: true
- Defaults: false
- Defaults: false
+ Accepts: 'top' | 'bottom' Defaults: bottom
+ Throws unexpectedOptionValue if value
+ is not one
+ of the accepted values.
+ Accepts: true|false
+ These options turns on or off the particular views. If option is false for
+ Defaults: true
+ Defaults: true
+ Defaults: true
+ Defaults: true
+ Defaults: true
+
+
+ Defaults: true
+ Defaults: true
+ Defaults: true
+ Defaults: false
+ Defaults: false Accepts: true|false
+
+
+ Accepts: true|false Defaults: false
+ Accepts: string
+
+ Any icon library that expects icons to be used like
+ Icon sprites are also supported.
+ Accepts either "icons" or "sprites"
+ Defaults: (fas
+ fa-clock)
+ Defaults: (fas
+ fa-calendar)
+ Defaults: (fas
+ fa-arrow-up)
+ Defaults: (fas
+ fa-arrow-down)
+ Defaults: (fas
+ fa-chevron-right)
+ Defaults: (fas
+ fa-chevron-left)
+ Defaults:
+ (fas fa-calendar-check)
+ Defaults: (fas
+ fa-trash)
+ Defaults: (fas
+ fa-times)
+ Accepts: 'clock' | 'calendar' | 'months' | 'years' | 'decades'
+ Defaults:
+ calendar
+ Accepts: true|false Defaults: false
+ Accepts: Defaults:boolean
+ Accepts: true|false Defaults: false Accepts: true|false
-
-
- Accepts: true|false Defaults: false
- Accepts: string
-
- Any icon library that expects icons to be used like
- Icon sprites are also supported.
- Accepts either "icons" or "sprites"
- Defaults: (fas fa-clock)
- Defaults: (fas fa-calendar)
- Defaults: (fas fa-arrow-up)
- Defaults: (fas fa-arrow-down)
- Defaults: (fas fa-chevron-right)
- Defaults: (fas fa-chevron-left)
- Defaults: (fas fa-calendar-check)
- Defaults: (fas fa-trash)
- Defaults: (fas fa-times)
- Accepts: 'clock' | 'calendar' | 'months' | 'years' | 'decades' Defaults:
- calendar
- Accepts: true|false Defaults: false
- Accepts: Defaults:boolean
- Accepts: true|false Defaults: false
+ Accepts number Defaults: 1
- Accepts:
- Whenever the picker attempts to set the input value from a selection, it will call this function. An example
- that would set the value to an ISO string. Obviously, it's up to you how you want the results to be displayed.
-
- Accepts:
- Whenever the input value changes, this function will be called. The most simple example is just to attempt to
- parse the string.
-
- Accepts number Defaults: 1
- Accepts true|false Defaults: true
- Accepts: string | Date | DateTime Defaults: undefined
- Accepts: string
- Most of the localization options are for title tooltips over icons.
-
- You can provide localization options to override the tooltips as well as the day/month display.
-
- You could also set this globally via
+ Accepts true|false Defaults: true
+ Accepts: string | Date | DateTime Defaults: undefined
+ Accepts: string
+ Most of the localization options are for title tooltips over icons.
+
+ You can provide localization options to override the tooltips as well as the day/month display.
+
+ You could also set this globally via
+ Defaults: Go to today
+ Defaults: Clear selection
+ Defaults: Close the picker
+ Defaults: Select Month
+ Defaults: Previous Month
+ Defaults: Next Month
+ Defaults: Select Year
+ Defaults: Previous Year
+ Defaults: Next Year
+ Defaults: Select Decade
+ Defaults: Previous Decade
+ Defaults: Next Decade
+ Defaults: Previous Century
+ Defaults: Next Century
+ Defaults: Pick Hour
+ Defaults: Increment Hour
+ Defaults: Decrement Hour
+ Defaults: Pick Minute
+ Defaults: Increment Minute
+ Defaults: Decrement Minute
+ Defaults: Pick Second
+ Defaults: Increment Second
+ Defaults: Decrement Second
+ Defaults: Toggle Period
+ Defaults: Select Time
+ Defaults: Select Date
+ Accepts: DateTimeFormatOptions Defaults:
+
+ Defaults: default
+ Accepts: 0-6 Defaults: 0
- Defaults: Go to today
- Defaults: Clear selection
+ Accepts true|false Defaults: false
+ Accepts true|false Defaults: false
+ Accepts true|false Defaults: false
- Defaults: Close the picker
- Defaults: Select Month
- Defaults: Previous Month
- Defaults: Next Month
- Defaults: Select Year
- Defaults: Previous Year
- Defaults: Next Year
- Defaults: Select Decade
- Defaults: Previous Decade
- Defaults: Next Decade
- Defaults: Previous Century
- Defaults: Next Century
- Defaults: Pick Hour
- Defaults: Increment Hour
- Defaults: Decrement Hour
- Defaults: Pick Minute
- Defaults: Increment Minute
- Defaults: Decrement Minute
- Defaults: Pick Second
- Defaults: Increment Second
- Defaults: Decrement Second
- Defaults: Toggle Period
- Defaults: Select Time
- Defaults: Select Date
- Accepts: DateTimeFormatOptions Defaults:
-
+ Accepts: string | Date | DateTime Defaults: now
+ Accepts true|false Defaults: false
- Defaults: default
+ Accepts: string Defaults:
- Accepts: 0-6 Defaults: 0
- Accepts true|false Defaults: false
- Accepts true|false Defaults: false
- Accepts true|false Defaults: false
- Accepts: string | Date | DateTime Defaults: now
- Accepts true|false Defaults: false
- Accepts: string Defaults:
- Accepts true|false Defaults: false
- Accepts number Defaults: 200
- Accepts object Defaults: {}
- Accepts
+ Accepts true|false Defaults: false
+ Accepts number Defaults: 200
+ Accepts object Defaults: {}
+ Accepts
- Currently v6.0.0-beta5.1
+ Currently v6.0.0-beta7
·
v5 docs
new tempusDominus.TempusDominus(...,
- options);
. Take a look at the examples for more information.
- updateOptions
function.
- minDate
-
-
-
- Prevents the user from selecting a date/time before this value. Set to undefined
to remove
- the
- restriction.
- maxDate
-
- Prevents the user from selecting a date/time after this value. Set to undefined
to remove the
- restriction.
- enabledDates/disabledDates
-
-
-
- enabledDates
- disabledDates
- enabledHours/disabledHours
-
-
-
- enabledHours
- disabledHours
- new
+ tempusDominus.TempusDominus(...,
+ options);
. Take a look at the examples for more information.
+ updateOptions
+ function.
+ disabledTimeIntervals
-
-
-
- Disables time selection between the given DateTimes.
-
+
minDate
+
+
+
+ Prevents the user from selecting a date/time before this value. Set to
+ undefined
to remove
+ the
+ restriction.
+ maxDate
+
+ Prevents the user from selecting a date/time after this value. Set to undefined
+ to remove the
+ restriction.
+ enabledDates/disabledDates
+
+
+
+ enabledDates
+ disabledDates
+ enabledHours/disabledHours
+
+
+
+ enabledHours
+ disabledHours
+ disabledTimeIntervals
+
+
+
+ Disables time selection between the given DateTimes.
+
-
const later = new tempusDominus.DateTime();
later.hours = 8;
@@ -126,731 +139,737 @@
disabledTimeIntervals
});
daysOfWeekDisabled
-
-
-
- Disallow the user to select weekdays that exist in this array. This has lower priority over the
- options.minDate, options.maxDate, options.disabledDates and options.enabledDates configuration settings.
- display
-
-
- toolbarPlacement
-
- Changes the placement of the toolbar where the today, clear, component switch icon are located.
- daysOfWeekDisabled
+
+
+
+ Disallow the user to select weekdays that exist in this array. This has lower priority over the
+ options.minDate, options.maxDate, options.disabledDates and options.enabledDates configuration
+ settings.
+ components
- date
the user would
- only be able to select month and year
- for instance.
- display
+
calendar
-
- A convenience flag that can enable or disable all of the calendar components like date, month, year,
- decades, century.
- This flag must be true for any of the calendar components to be visible, even if those options are true.
- date
-
-
- month
-
-
-
- Turns on or off the month selection view.
- year
-
-
- decades
-
-
-
- clock
-
-
- A convenience flag that can enable or disable all of the calendar components like date, month, year,
- decades, century.
- This flag must be true for any of the calendar components to be visible, even if those options are true.
- hours
-
-
- Displayed above in red
- minutes
-
-
- Displayed above in purple
- seconds
-
-
- Displayed above in green
- useTwentyfourHour
-
-
- toolbarPlacement
+
+ Changes the placement of the toolbar where the today, clear, component switch icon are located.
+ components
+ date
the
+ user would
+ only be able to select month and year
+ for instance.
+ calendar
+
+ A convenience flag that can enable or disable all of the calendar components like date,
+ month, year,
+ decades, century.
+ This flag must be true for any of the calendar components to be visible, even if those
+ options are true.
+ date
+
+
+ month
+
+
+
+ Turns on or off the month selection view.
+ year
+
+
+ decades
+
+
+
+ clock
+
+
+ A convenience flag that can enable or disable all the calendar components like date,
+ month, year,
+ decades, century.
+ This flag must be true for any of the calendar components to be visible, even if those
+ options are true.
+ hours
+
+
+ Displayed above in red
+ minutes
+
+
+ Displayed above in purple
+ seconds
+
+
+ Displayed above in green
+ useTwentyfourHour
+
+
+ buttons
+
+ calendarWeeks
+
+
+ Displays an additional column with the calendar week for that week.
+ icons
+
+ <i class='fas fa-calendar'></i>
will work, provided you include the
+ correct
+ styles and scripts needed.
+ type
+
+ Defaults to "icons". If "sprites" is used as the value, the icons will be render with an svg
+ element
+ instead
+ of an "i" element. If you don't know which you should use, leave it as "icons".
+ time
+
+ This icon is used to change the view from the calendar view to the clock view.
+ date
+
+ This icon is used to change the view from the clock view to the calendar view.
+ up
+
+ This icon is used to incremeant hours, minutes and seconds in the clock view.
+ down
+
+ This icon is used to decremeant hours, minutes and seconds in the clock view.
+ next
+
+ This icon is used to navigation forward in the calendar, month, year, and decade views.
+ previous
+
+ This icon is used to navigation backwards in the calendar, month, year, and decade views.
+ today
+
+
+ This icon is used to change the date and view to now.
+ clear
+
+
+ This icon is used to clear the currently selected date.
+ close
+
+
+ This icon is used to close the picker.
+ viewMode
+
+ The default view when the picker is displayed. Set to "years" for a date of birth picker.
+ sideBySide
+
+
+ Displays the date and time pickers side by side.
+ inline
+
+
+ Displays the picker in a inline div instead of a popup.
+ keepOpen
+
+ Keep the picker window open even after a date selection. The picker can still be closed by the
+ target or
+ clicking on on an outside element. This option will only work when time components are disabled.
+ buttons
-
- calendarWeeks
-
-
- Displays an additional column with the calendar week for that week.
- icons
-
- <i class='fas fa-calendar'></i>
will work, provided you include the correct
- styles and scripts needed.
- type
-
- Defaults to "icons". If "sprites" is used as the value, the icons will be render with an svg element
- instead
- of an "i" element. If you don't know which you should use, leave it as "icons".
- time
-
- This icon is used to change the view from the calendar view to the clock view.
- date
-
- This icon is used to change the view from the clock view to the calendar view.
- up
-
- This icon is used to incremeant hours, minutes and seconds in the clock view.
- down
-
- This icon is used to decremeant hours, minutes and seconds in the clock view.
- next
-
- This icon is used to navigation forward in the calendar, month, year, and decade views.
- previous
-
- This icon is used to navigation backwards in the calendar, month, year, and decade views.
- today
-
-
- This icon is used to change the date and view to now.
- clear
-
-
- This icon is used to clear the currently selected date.
- close
-
-
- This icon is used to close the picker.
- viewMode
-
- The default view when the picker is displayed. Set to "years" for a date of birth picker.
- sideBySide
-
-
- Displays the date and time pickers side by side.
- inline
-
-
- Displays the picker in a inline div instead of a popup.
- keepOpen
-
- Keep the picker window open even after a date selection. The picker can still be closed by the target or
- clicking on on an outside element. This option will only work when time components are disabled.
- hooks
+
stepping
+
+ Controls how much the minutes are changed by. This also changes the minute selection grid to step by this
+ amount.
+ inputFormat
-
- (context: TempusDominus, date: DateTime) => string
or undefined
- Defaults:
- undefined
- Takes a function that turns the selected date(s) into a string. If not provided, Intl formatting will be
- used based on configured components. The complete context is provided so you can access the input field itself
- via context.input
or any of the validation methods and so on.
-
-
-
-inputFormat:(context, date) => { return date.toISOString() }
-
- inputParse
-
- (context: TempusDominus, value: any) => DateTime
or undefined Defaults:
- undefined
- Takes a function that turns the input value into a DateTime object. If not provided, the internal parsing
- method will be used. The complete context is provided so you can access the input field itself
- via context.input
or any of the validation methods and so on.
-
-
-
-inputParse: (context, value) => { return new tempusDominus.DateTime(value) }
-
- stepping
-
-
- Controls how much the minutes are changed by. This also changes the minute selection grid to step by this amount.
- useCurrent
-
- Determines if the current date/time should be used as the default value when the picker is opened.
- defaultDate
-
- Sets the picker default date/time. Overrides useCurrent
- localizationuseCurrent
- tempusDominus.DefaultOptions.localization = { ... }
or by
- creating a variable e.g. const ru = { today:'Перейти сегодня' ... };
then provide the options
- as
-
+
+ Determines if the current date/time should be used as the default value when the picker is opened.
+ defaultDate
+
+ Sets the picker default date/time. Overrides useCurrent
+ localization
+ tempusDominus.DefaultOptions.localization = { ...
+ }
or by
+ creating a variable e.g. const ru = { today:'Перейти сегодня' ... };
then provide
+ the options
+ as
+
+
new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'), {
localization: ru
}
today
+
+
+ clear
+
+
+ close
+
+
+ selectMonth
+
+ previousMonth
+
+ nextMonth
+
+ selectYear
+
+ previousYear
+
+ nextYear
+
+ selectDecade
+
+ previousDecade
+
+ nextDecade
+
+ previousCentury
+
+ nextCentury
+
+ pickHour
+
+ incrementHour
+
+ decrementHour
+
+ pickMinute
+
+ incrementMinute
+
+ decrementMinute
+
+ pickSecond
+
+ incrementSecond
+
+ decrementSecond
+
+ togglePeriod
+
+ selectTime
+
+ selectDate
+
+ dayViewHeaderFormat
+
+ { month: 'long', year: '2-digit' }
+ This should be an appropriate value from the Intl.DateFormat options.
+ locale
+
+
+ This should be a BCP 47 language tag or a value supported by Intl.
+ startOfTheWeek
+
+
+ Changes the start of the week to the provided index. Intl/Date does not provide apis to get the
+ locale's
+ start of the week. 0 = Sunday, 6 = Saturday. If you want the calendar view to start on Monday,
+ set this
+ option to 1.
+ today
-
-
- clear
-
-
- keepInvalid
+
+ Allows for the user to select a date that is invalid coording to the rules. For instance, if a user enters a
+ date
+ pasted the maxDate
.
+ debug
+
+ Similar to display.keepOpen
, if true the picker won't close during any event where that would
+ normally
+ occur. This is useful when trying to debug rules or css changes. Note you can also use window.debug =
+ true
in the dev tools console. Using the window object is useful for debugging deployed code without
+ requiring a configuration change.
+ allowInputToggle
+
+ If true, the picker will show on textbox focus.
+ close
-
-
- selectMonth
-
- previousMonth
-
- nextMonth
-
- selectYear
-
- previousYear
-
- nextYear
-
- selectDecade
-
- previousDecade
-
- nextDecade
-
- previousCentury
-
- nextCentury
-
- pickHour
-
- incrementHour
-
- decrementHour
-
- pickMinute
-
- incrementMinute
-
- decrementMinute
-
- pickSecond
-
- incrementSecond
-
- decrementSecond
-
- togglePeriod
-
- selectTime
-
- selectDate
-
- dayViewHeaderFormatviewDate
-
- { month: 'long', year: '2-digit' }
- This should be an appropriate value from the Intl.DateFormat options.
- locale
+
-
+ Set the view date of the picer. Setting this will not change the selected date(s).
+ multipleDates
+
+ Allows multiple dates to be selected.
+ multipleDatesSeparator
-
- This should be a BCP 47 language tag or a value supported by Intl.
- startOfTheWeek
+
- ;
+ When multipleDates
is enabled, this value wil be used to separate the selected dates. E.g. 08/29/2021,
+ 12:00 AM; 08/30/2021, 12:00 AM; 08/23/2021, 12:00 AM
+ promptTimeOnDateChange
-
- Changes the start of the week to the provided index. Intl/Date does not provide apis to get the locale's
- start of the week. 0 = Sunday, 6 = Saturday. If you want the calendar view to start on Monday, set this
- option to 1.
- keepInvalid
-
- Allows for the user to select a date that is invalid coording to the rules. For instance, if a user enters a date
- pasted the maxDate
.
- debug
-
- Similar to display.keepOpen
, if true the picker won't close during any event where that would normally
- occur. This is useful when trying to debug rules or css changes. Note you can also use window.debug =
- true
in the dev tools console. Using the window object is useful for debugging deployed code without
- requiring a configuration change.
- allowInputToggle
-
- If true, the picker will show on textbox focus.
- viewDate
-
-
- Set the view date of the picer. Setting this will not change the selected date(s).
- multipleDates
-
- Allows multiple dates to be selected.
- multipleDatesSeparator
-
- ;
- When multipleDates
is enabled, this value wil be used to separate the selected dates. E.g. 08/29/2021,
- 12:00 AM; 08/30/2021, 12:00 AM; 08/23/2021, 12:00 AM
- promptTimeOnDateChange
-
-
- If enabled and any of the time components are enabled, when a user selects a date the picker will automatically
- display the clock view after promptTimeOnDateChangeTransitionDelay
.
- promptTimeOnDateChangeTransitionDelay
-
-
-
-
-
- Used with promptTimeOnDateChange
. The number of milliseconds before the picker will display the clock
- view.
- meta
-
-
-
-
-
- This property is to provide developers a place to store extra information about the picker. You can use this to store database format strings for instance. There are no rules on what you add to this object and the picker will not reference it.
- container
-
-
-
-
- HTMLElement
Defaults: undefined
- Change the target container to use for the widget instead of body
(In case of application using shadow DOM for example).
-
+ If enabled and any of the time components are enabled, when a user selects a date the picker will automatically
+ display the clock view after promptTimeOnDateChangeTransitionDelay
.
+ promptTimeOnDateChangeTransitionDelay
+
+
+
+
+
+ Used with promptTimeOnDateChange
. The number of milliseconds before the picker will display the
+ clock
+ view.
+ meta
+
+
+
+
+
+ This property is to provide developers a place to store extra information about the picker. You can use this to
+ store database format strings for instance. There are no rules on what you add to this object and the picker
+ will not reference it.
+ container
+
+
+
+
+ HTMLElement
Defaults: undefined
+ Change the target container to use for the widget instead of body
(In case of application using
+ shadow DOM for example).
+ Powerful and robust date and time picker
Download