Localization

Customize labels and formats for international audiences

Custom Labels

Timepicker-UI allows you to customize all text labels to support any language:

Default Labels

// Default English labels
{
  labels: {
    ok: 'Ok',
    cancel: 'Cancel',
    am: 'AM',
    pm: 'PM'
  }
}

Spanish Localization

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

picker.create();

French Localization

const picker = new TimepickerUI(input, {
  labels: {
    ok: 'Valider',
    cancel: 'Annuler',
    am: 'AM',
    pm: 'PM'
  }
});

picker.create();

German Localization

const picker = new TimepickerUI(input, {
  labels: {
    ok: 'OK',
    cancel: 'Abbrechen',
    am: 'AM',
    pm: 'PM'
  }
});

picker.create();

Language Configuration Object

Create reusable language configuration objects for consistency:

Language Config Files

// locales/es.ts
export const esLocale = {
  labels: {
    ok: 'Aceptar',
    cancel: 'Cancelar',
    am: 'AM',
    pm: 'PM'
  }
};

// locales/fr.ts
export const frLocale = {
  labels: {
    ok: 'Valider',
    cancel: 'Annuler',
    am: 'AM',
    pm: 'PM'
  }
};

// locales/de.ts
export const deLocale = {
  labels: {
    ok: 'OK',
    cancel: 'Abbrechen',
    am: 'AM',
    pm: 'PM'
  }
};

// locales/ja.ts
export const jaLocale = {
  okLabel: '確認',
  cancelLabel: 'キャンセル',
  amLabel: '午前',
  pmLabel: '午後'
};

// locales/zh.ts
export const zhLocale = {
  okLabel: '确定',
  cancelLabel: '取消',
  amLabel: '上午',
  pmLabel: '下午'
};

Using Language Configs

import TimepickerUI from 'timepicker-ui';
import { esLocale } from './locales/es';

const picker = new TimepickerUI(input, {
  ...esLocale,
  clock: { type: '24h' }
});

picker.create();

Dynamic Language Switching

import { esLocale, frLocale, deLocale } from './locales';

const locales = {
  es: esLocale,
  fr: frLocale,
  de: deLocale
};

function createLocalizedPicker(language: string) {
  const locale = locales[language] || esLocale;
  
  const picker = new TimepickerUI(input, {
    ...locale,
    clock: { type: '24h' }
  });
  
  return picker;
}

// Usage
let picker = createLocalizedPicker('es');
picker.create();

// Switch language
picker.destroy();
picker = createLocalizedPicker('fr');
picker.create();

Time Format Localization

Different regions use different time formats. Configure the clock type based on locale:

12-hour Format (US, UK, Canada)

const picker = new TimepickerUI(input, {
  clock: { type: '12h' },
  labels: {
    ok: 'OK',
    cancel: 'Cancel',
    am: 'AM',
    pm: 'PM'
  }
});

24-hour Format (Europe, Asia, Most of World)

const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  labels: {
    ok: 'OK',
    cancel: 'Annuler'
  }
  // No am/pm labels needed for 24h format
});

Auto-detect User Locale

function getLocaleTimeFormat() {
  // Get user's locale
  const locale = navigator.language || 'en-US';
  
  // Test if locale uses 12-hour format
  const testDate = new Date(2000, 0, 1, 13, 0);
  const formatted = testDate.toLocaleTimeString(locale);
  
  return formatted.includes('PM') || formatted.includes('AM') ? '12h' : '24h';
}

// Usage
const clockType = getLocaleTimeFormat();
const picker = new TimepickerUI(input, {
  clock: { type: clockType }
});

picker.create();

Complete Locale Examples

Ready-to-use configurations for common languages:

Japanese (日本語)

const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  labels: {
    ok: '確認',
    cancel: 'キャンセル'
  }
});

Chinese Simplified (简体中文)

const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  labels: {
    ok: '确定',
    cancel: '取消'
  }
});

Arabic (العربية)

const picker = new TimepickerUI(input, {
  clock: { type: '12h' },
  labels: {
    ok: 'موافق',
    cancel: 'إلغاء',
    am: 'ص',
    pm: 'م'
  }
});

Russian (Русский)

const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  labels: {
    ok: 'ОК',
    cancel: 'Отмена'
  }
});

Portuguese (Português)

const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  labels: {
    ok: 'Confirmar',
    cancel: 'Cancelar'
  }
});

Italian (Italiano)

const picker = new TimepickerUI(input, {
  clock: { type: '24h' },
  labels: {
    ok: 'OK',
    cancel: 'Annulla'
  }
});

React i18n Integration

Integrate with popular i18n libraries:

react-i18next

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

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

  useEffect(() => {
    if (inputRef.current) {
      pickerRef.current = new TimepickerUI(inputRef.current, {
        clock: {
          type: i18n.language.includes('en') ? '12h' : '24h'
        },
        labels: {
          ok: t('timepicker.ok'),
          cancel: t('timepicker.cancel'),
          am: t('timepicker.am'),
          pm: t('timepicker.pm')
        }
      });
      
      pickerRef.current.create();
    }

    return () => {
      pickerRef.current?.destroy();
    };
  }, [t, i18n.language]);

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

i18n Translation File

// locales/en/translation.json
{
  "timepicker": {
    "ok": "OK",
    "cancel": "Cancel",
    "am": "AM",
    "pm": "PM"
  }
}

// locales/es/translation.json
{
  "timepicker": {
    "ok": "Aceptar",
    "cancel": "Cancelar",
    "am": "AM",
    "pm": "PM"
  }
}

// locales/fr/translation.json
{
  "timepicker": {
    "ok": "Valider",
    "cancel": "Annuler",
    "am": "AM",
    "pm": "PM"
  }
}

Right-to-Left (RTL) Support

Support for RTL languages like Arabic and Hebrew:

/* Add to your CSS */
[dir="rtl"] .timepicker-ui-wrapper {
  direction: rtl;
}

[dir="rtl"] .timepicker-ui-hour,
[dir="rtl"] .timepicker-ui-minutes {
  text-align: right;
}

// JavaScript
const picker = new TimepickerUI(input, {
  clock: { type: '12h' },
  labels: {
    ok: 'موافق',
    cancel: 'إلغاء',
    am: 'ص',
    pm: 'م'
  }
});

picker.create();

// Set RTL on container
document.querySelector('.timepicker-container').dir = 'rtl';

Contributing Translations

If you'd like to contribute translations for additional languages to the official documentation or create a locale pack, please open a pull request on GitHub. Community translations help make Timepicker-UI accessible to users worldwide.

View on GitHub