Localization Options

On this page

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 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
 }

new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),
  {
    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,
      hourCycle: undefined,
      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'
      },
      ordinal: (n) => n,
      format: 'L',
      toggleAriaLabel: 'Change date',
    }
  }
)

today

Defaults: Go to today

clear

Defaults: Clear selection

close

Defaults: Close the picker

selectMonth

Defaults: Select Month

previousMonth

Defaults: Previous Month

nextMonth

Defaults: Next Month

selectYear

Defaults: Select Year

previousYear

Defaults: Previous Year

nextYear

Defaults: Next Year

selectDecade

Defaults: Select Decade

previousDecade

Defaults: Previous Decade

nextDecade

Defaults: Next Decade

previousCentury

Defaults: Previous Century

nextCentury

Defaults: Next Century

pickHour

Defaults: Pick Hour

incrementHour

Defaults: Increment Hour

decrementHour

Defaults: Decrement Hour

pickMinute

Defaults: Pick Minute

incrementMinute

Defaults: Increment Minute

decrementMinute

Defaults: Decrement Minute

pickSecond

Defaults: Pick Second

incrementSecond

Defaults: Increment Second

decrementSecond

Defaults: Decrement Second

toggleMeridiem

Defaults: Toggle Period

selectTime

Defaults: Select Time

selectDate

Defaults: Select Date

dayViewHeaderFormat

Accepts: DateTimeFormatOptions Defaults: { month: 'long', year: '2-digit' }
This should be an appropriate value from the Intl.DateFormat options.

locale

Defaults: default
This should be a BCP 47 language tag or a value supported by Intl.

startOfTheWeek

Accepts: 0-6 Defaults: 0
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.

maxWeekdayLength

Accepts: number Defaults: 0
If provided the weekday string will be truncated to this length. This is useful when the Intl values are too long.

hourCycle

Accepts: 'h11' | 'h12' | 'h23' | 'h24' Defaults: undefined
Changes how the hours are displayed. If left undefined, the picker will attempt to guess.

Here is how the different options affect the start and end of the day.

Hour Cycle	Midnight	Night	Notes
h11	00 AM	11 PM	If your locale uses this please let me know.
h12	12 AM	11 PM
h23	00	23
h24	01	24	If your locale uses this please let me know.

dateFormats

These options describe shorthand format strings.

LTS

Long form time format.

LT

Short time format.

L

Standard date format.

LL

Long form date format. US default is July 4, 2022.

LLL

Long form date/time format. US default is July 4, 2022 9:30 AM.

LLLL

Long form date/time format with weekday. US default is Monday, July 4, 2022 9:30 AM.

ordinal

Function to convert cardinal numbers to ordinal numbers, e.g. 3 -> third.

format

Default tokenized format to use. This can be "L" or "dd/MM/yyyy".

toggleAriaLabel

The aria-label to use for the toggle button. Defaults to "Change date", unless one more or dates is selected, in which case it will be "Change date, {dates}".