timepicker-ui
4.7.0GitHub
timepicker-ui
GitHub4.7.0
Advanced / Localization

Localization

Customize labels and text for different languages and regions

Docs: Localization

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:

import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  labels: {
    ok: 'OK',
    cancel: 'Anuluj',
    am: 'AM',
    pm: 'PM'
  }
});


picker.create();

Spanish (Español)

#

Spanish language example:

import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  labels: {
    ok: 'Aceptar',
    cancel: 'Cancelar',
    am: 'AM',
    pm: 'PM'
  }
});


picker.create();

German (Deutsch)

#

German language example:

import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  labels: {
    ok: 'OK',
    cancel: 'Abbrechen'
  }
});


picker.create();

French (Français)

#

French language example:

import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  labels: {
    ok: 'OK',
    cancel: 'Annuler'
  }
});


picker.create();

Japanese (日本語)

#

Japanese language example:

import { TimepickerUI } from 'timepicker-ui';


const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input, {
  labels: {
    ok: '確定',
    cancel: 'キャンセル',
    am: '午前',
    pm: '午後'
  }
});


picker.create();

Dynamic Language Switching

#

Switch languages at runtime with setOptions():

import { TimepickerUI } from 'timepicker-ui';


const translations = {
  en: { ok: 'OK', cancel: 'Cancel', am: 'AM', pm: 'PM' },
  es: { ok: 'Aceptar', cancel: 'Cancelar', am: 'AM', pm: 'PM' },
  pl: { ok: 'OK', cancel: 'Anuluj', am: 'AM', pm: 'PM' },
  de: { ok: 'OK', cancel: 'Abbrechen', am: 'VM', pm: 'NM' }
};


const input = document.querySelector('#timepicker');
const picker = new TimepickerUI(input);
picker.create();


function changeLanguage(lang: string) {
  const t = translations[lang];
  picker.setOptions({
    labels: {
      ok: t.ok,
      cancel: t.cancel,
      am: t.am,
      pm: t.pm
    }
  });
}


// Usage: changeLanguage('es');

React i18n Integration

#

Integrate with React i18n libraries like react-i18next:

import { useEffect, useRef, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { TimepickerUI } from 'timepicker-ui';


function LocalizedTimepicker() {
  const inputRef = useRef<HTMLInputElement>(null);
  const pickerRef = useRef<TimepickerUI | null>(null);
  const { t } = useTranslation();


  const options = useMemo(() => ({
    labels: {
      ok: t('timepicker.ok'),
      cancel: t('timepicker.cancel'),
      am: t('timepicker.am'),
      pm: t('timepicker.pm')
    }
  }), [t]);


  useEffect(() => {
    if (!inputRef.current) return;


    const picker = new TimepickerUI(inputRef.current, options);
    picker.create();
    pickerRef.current = picker;


    return () => {
      picker.destroy();
      pickerRef.current = null;
    };
  }, []);


  useEffect(() => {
    pickerRef.current?.setOptions(options);
  }, [options]);


  return <input ref={inputRef} type="text" />;
}
Esc