Localization Options
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',
}
}
)
dayViewHeaderFormat
Accepts: DateTimeFormatOptions Defaults:
{ month: 'long', year: '2-digit' }
This should be an appropriate value from the Intl.DateFormat options.
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. |
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}".