Skip to main content Skip to docs navigation


On this page

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.

While most of the date options accept string values it wil throw a warning. JavaScript's Date objects will be converted to the pickers DateTime object.
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


Accepts number Defaults: 1
Controls how much the minutes are changed by. This also changes the minute selection grid to step by this amount.


Accepts true|false Defaults: true
Determines if the current date/time should be used as the default value when the picker is opened.


Accepts: string | Date | DateTime Defaults: undefined
Sets the picker default date/time. Overrides useCurrent


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.


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.


Accepts true|false Defaults: false
If true, the picker will show on textbox focus.


Accepts: string | Date | DateTime Defaults: now
Set the view date of the picker. Setting this will not change the selected date(s).


Accepts true|false Defaults: false
Allows multiple dates to be selected.


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


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.


Accepts number Defaults: 200
Used with promptTimeOnDateChange. The number of milliseconds before the picker will display the clock view.


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.


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).