Options
Options can be provided during the initial setup through the constructor new
tempusDominus.TempusDominus(..., options);
. Take a look at the examples for more information.
The current options can be retrieved e.g. datetimepicker1.optionsStore.options
.
Options can be updated through the updateOptions
function.
All options will throw typeMismatch if the provided type does not match the expected type, e.g. a string instead of a boolean.
new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),
{
restrictions: {
minDate: undefined,
maxDate: undefined,
disabledDates: [],
enabledDates: [],
daysOfWeekDisabled: [],
disabledTimeIntervals: [],
disabledHours: [],
enabledHours: []
},
display: {
icons: {
type: 'icons',
time: 'fa-solid fa-clock',
date: 'fa-solid fa-calendar',
up: 'fa-solid fa-arrow-up',
down: 'fa-solid fa-arrow-down',
previous: 'fa-solid fa-chevron-left',
next: 'fa-solid fa-chevron-right',
today: 'fa-solid fa-calendar-check',
clear: 'fa-solid fa-trash',
close: 'fa-solid fa-xmark'
},
sideBySide: false,
calendarWeeks: false,
viewMode: 'calendar',
toolbarPlacement: 'bottom',
keepOpen: false,
buttons: {
today: false,
clear: false,
close: false
},
components: {
calendar: true,
date: true,
month: true,
year: true,
decades: true,
clock: true,
hours: true,
minutes: true,
seconds: false,
useTwentyfourHour: undefined
},
inline: false,
theme: 'auto'
},
stepping: 1,
useCurrent: true,
defaultDate: undefined,
localization: {
today: 'Go to today',
clear: 'Clear selection',
close: 'Close the picker',
selectMonth: 'Select Month',
previousMonth: 'Previous Month',
nextMonth: 'Next Month',
selectYear: 'Select Year',
previousYear: 'Previous Year',
nextYear: 'Next Year',
selectDecade: 'Select Decade',
previousDecade: 'Previous Decade',
nextDecade: 'Next Decade',
previousCentury: 'Previous Century',
nextCentury: 'Next Century',
pickHour: 'Pick Hour',
incrementHour: 'Increment Hour',
decrementHour: 'Decrement Hour',
pickMinute: 'Pick Minute',
incrementMinute: 'Increment Minute',
decrementMinute: 'Decrement Minute',
pickSecond: 'Pick Second',
incrementSecond: 'Increment Second',
decrementSecond: 'Decrement Second',
toggleMeridiem: 'Toggle Meridiem',
selectTime: 'Select Time',
selectDate: 'Select Date',
dayViewHeaderFormat: { month: 'long', year: '2-digit' },
locale: 'default',
startOfTheWeek: 0,
/**
* This is only used with the customDateFormat plugin
*/
dateFormats: {
LTS: 'h:mm:ss T',
LT: 'h:mm T',
L: 'MM/dd/yyyy',
LL: 'MMMM d, yyyy',
LLL: 'MMMM d, yyyy h:mm T',
LLLL: 'dddd, MMMM d, yyyy h:mm T'
},
/**
* This is only used with the customDateFormat plugin
*/
ordinal: (n) => n,
/**
* This is only used with the customDateFormat plugin
*/
format: 'L'
},
keepInvalid: false,
debug: false,
allowInputToggle: false,
viewDate: new DateTime(),
multipleDates: false,
multipleDatesSeparator: '; ',
promptTimeOnDateChange: false,
promptTimeOnDateChangeTransitionDelay: 200,
meta: {},
container: undefined
}
)
stepping
Accepts number Defaults: 1
Controls how much the minutes are changed by. This also changes the minute selection grid to step by this
amount.
useCurrent
Accepts true|false Defaults: true
Determines if the current date/time should be used as the default value when the picker is opened.
defaultDate
Accepts: string | Date | DateTime Defaults: undefined
Sets the picker default date/time. Overrides useCurrent
keepInvalid
Accepts true|false Defaults: false
Allows for the user to select a date that is invalid according to the rules. For instance, if a user enters a date
pasted the maxDate
.
debug
Accepts true|false Defaults: false
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.
viewDate
Accepts: string | Date | DateTime Defaults: now
Set the view date of the picker. Setting this will not change the selected date(s).
multipleDatesSeparator
Accepts: string Defaults: ;
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
Accepts true|false Defaults: false
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
Accepts number Defaults: 200
Used with promptTimeOnDateChange
. The number of milliseconds before the picker will display the
clock
view.
meta
Accepts object Defaults: {}
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
Accepts HTMLElement
Defaults: undefined
Change the target container to use for the widget instead of body
(In case of application using
shadow DOM for example).