Internationalization

The timepicker ships with four built-in locales and a simple API for registering custom ones.

Built-in locales

Key	Language
'en'	English (default)
'sk'	Slovak
'cs'	Czech
'de'	German

Set the locale at construction time:

new Timepicker('#tp', { locale: 'sk' })
new Timepicker('#tp', { locale: 'de' })

Or as a global default for all pickers on the page:

Timepicker.setDefaults({ locale: 'cs' })

What the locale controls

A LocaleConfig object provides all user-visible strings inside the picker:

interface LocaleConfig {
  title: string         // Dropdown header text
  hoursLabel: string    // ARIA label for the hours column
  minutesLabel: string  // ARIA label for the minutes column
  secondsLabel: string  // ARIA label for the seconds column
  amLabel: string       // AM button text
  pmLabel: string       // PM button text
  nowLabel: string      // "Now" button text
  clearLabel: string    // "Clear" button text
  confirmLabel: string  // "Confirm" button text
}

Built-in locale strings

English (en)

Key	Value
title	'Select time'
hoursLabel	'Hours'
minutesLabel	'Minutes'
secondsLabel	'Seconds'
amLabel	'AM'
pmLabel	'PM'
nowLabel	'Now'
clearLabel	'Clear'
confirmLabel	'Confirm'

Slovak (sk)

Key	Value
title	'Vybrať čas'
hoursLabel	'Hodiny'
minutesLabel	'Minúty'
secondsLabel	'Sekundy'
nowLabel	'Teraz'
clearLabel	'Vymazať'
confirmLabel	'Potvrdiť'

Custom locales

Inline object

Pass a LocaleConfig object directly as the locale option:

new Timepicker('#tp', {
  locale: {
    title: 'Choisir l\'heure',
    hoursLabel: 'Heures',
    minutesLabel: 'Minutes',
    secondsLabel: 'Secondes',
    amLabel: 'AM',
    pmLabel: 'PM',
    nowLabel: 'Maintenant',
    clearLabel: 'Effacer',
    confirmLabel: 'Confirmer',
  },
})

Registered locale

Register a named locale once and reference it by key in any picker:

import { registerLocale } from '@tito10047/vanilla-js-timepicker'

registerLocale('fr', {
  title: 'Choisir l\'heure',
  hoursLabel: 'Heures',
  minutesLabel: 'Minutes',
  secondsLabel: 'Secondes',
  amLabel: 'AM',
  pmLabel: 'PM',
  nowLabel: 'Maintenant',
  clearLabel: 'Effacer',
  confirmLabel: 'Confirmer',
})

// Use it anywhere
new Timepicker('#tp1', { locale: 'fr' })
new Timepicker('#tp2', { locale: 'fr' })
Timepicker.setDefaults({ locale: 'fr' })

registerLocale is idempotent — registering the same key twice overwrites the previous value.

Locale resolution order

When the locale option is resolved, the order is:

1. If an object is passed directly → use it as-is.
2. If a string key is passed → look in custom-registered locales first.
3. If not found in custom locales → look in built-in locales.
4. If not found in built-in locales → fall back to 'en'.

Cookbook

See Custom Locale for a complete example including loading a locale from a JSON file and registering it at application startup.