Example · Advanced

Localization

Customize labels and text for different languages and regions

i18n Support

Timepicker-UI supports full localization through label options. You can customize all button texts and time type labels.

Polish (Polski)

Polish language example:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  labels: {
6    ok: 'OK',
7    cancel: 'Anuluj',
8    am: 'AM',
9    pm: 'PM'
10  }
11});
12
13picker.create();

Spanish (Español)

Spanish language example:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  labels: {
6    ok: 'Aceptar',
7    cancel: 'Cancelar',
8    am: 'AM',
9    pm: 'PM'
10  }
11});
12
13picker.create();

German (Deutsch)

German language example:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  labels: {
6    ok: 'OK',
7    cancel: 'Abbrechen',
8    am: 'Vormittag',
9    pm: 'Nachmittag'
10  }
11});
12
13picker.create();

French (Français)

French language example:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  labels: {
6    ok: 'OK',
7    cancel: 'Annuler',
8    am: 'Matin',
9    pm: 'Après-midi'
10  }
11});
12
13picker.create();

Japanese (日本語)

Japanese language example:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  labels: {
6    ok: '確定',
7    cancel: 'キャンセル',
8    am: '午前',
9    pm: '午後'
10  }
11});
12
13picker.create();

Dynamic Language Switching

Switch languages dynamically using the update method:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const translations = {
4  en: { ok: 'OK', cancel: 'Cancel', am: 'AM', pm: 'PM' },
5  es: { ok: 'Aceptar', cancel: 'Cancelar', am: 'AM', pm: 'PM' },
6  pl: { ok: 'OK', cancel: 'Anuluj', am: 'Rano', pm: 'Popołudnie' },
7  de: { ok: 'OK', cancel: 'Abbrechen', am: 'VM', pm: 'NM' }
8};
9
10const input = document.querySelector('#timepicker');
11const picker = new TimepickerUI(input);
12picker.create();
13
14function changeLanguage(lang: string) {
15  const t = translations[lang];
16  picker.update({
17    options: {
18      labels: {
19        ok: t.ok,
20        cancel: t.cancel,
21        am: t.am,
22        pm: t.pm
23      }
24    }
25  });
26}
27
28// Usage: changeLanguage('es');

React i18n Integration

Integrate with React i18n libraries like react-i18next:

Live

Select time

index.tstypescript

1import { useEffect, useRef, useMemo } from 'react';
2import { useTranslation } from 'react-i18next';
3import { TimepickerUI } from 'timepicker-ui';
4
5function LocalizedTimepicker() {
6  const inputRef = useRef<HTMLInputElement>(null);
7  const pickerRef = useRef<TimepickerUI | null>(null);
8  const { t } = useTranslation();
9
10  const options = useMemo(() => ({
11    labels: {
12      ok: t('timepicker.ok'),
13      cancel: t('timepicker.cancel'),
14      am: t('timepicker.am'),
15      pm: t('timepicker.pm')
16    }
17  }), [t]);
18
19  useEffect(() => {
20    if (!inputRef.current) return;
21
22    if (pickerRef.current) {
23      pickerRef.current.update({ options });
24    } else {
25      pickerRef.current = new TimepickerUI(inputRef.current, options);
26      pickerRef.current.create();
27    }
28
29    return () => {
30      pickerRef.current?.destroy();
31    };
32  }, [options]);
33
34  return <input ref={inputRef} type="text" />;
35}