Localization

@bturkis/datepicker ships with 15 built-in languages. Calendar month names and weekday labels are generated via the browser's Intl.DateTimeFormat API, ensuring native-quality translations.

Supported Languages

Code	Flag	Language	Placeholder Example
`tr`	🇹🇷	Türkçe	Tarih seçin
`en`	🇬🇧	English	Select date
`de`	🇩🇪	Deutsch	Datum wählen
`fr`	🇫🇷	Français	Choisir une date
`es`	🇪🇸	Español	Seleccionar fecha
`it`	🇮🇹	Italiano	Seleziona data
`pt`	🇧🇷	Português	Selecionar data
`ru`	🇷🇺	Русский	Выберите дату
`ar`	🇸🇦	العربية	اختر التاريخ
`ja`	🇯🇵	日本語	日付を選択
`zh`	🇨🇳	中文	选择日期
`ko`	🇰🇷	한국어	날짜 선택
`nl`	🇳🇱	Nederlands	Datum kiezen
`pl`	🇵🇱	Polski	Wybierz datę
`uk`	🇺🇦	Українська	Оберіть дату

TimePicker Translations

All 15 languages include full TimePicker support with localized labels.

Code	Time Label	Now Button	Time Placeholder	AM	PM
`tr`	Saat	Şimdi	Saat seçin	ÖÖ	ÖS
`en`	Time	Now	Select time	AM	PM
`de`	Uhrzeit	Jetzt	Uhrzeit wählen	AM	PM
`fr`	Heure	Maintenant	Choisir l'heure	AM	PM
`es`	Hora	Ahora	Elegir hora	AM	PM
`it`	Ora	Adesso	Scegli ora	AM	PM
`pt`	Hora	Agora	Escolher hora	AM	PM
`ru`	Время	Сейчас	Выбрать время	AM	PM
`ar`	الوقت	الآن	اختر الوقت	ص	م
`ja`	時刻	現在	時刻を選択	午前	午後
`zh`	时间	此刻	选择时间	上午	下午
`ko`	시간	지금	시간 선택	오전	오후
`nl`	Tijd	Nu	Kies tijd	AM	PM
`pl`	Godzina	Teraz	Wybierz godzinę	AM	PM
`uk`	Час	Зараз	Обрати час	AM	PM

12-Hour Format with Localized AM/PM

vue

<!-- Turkish: shows ÖÖ / ÖS buttons -->
<DatePicker v-model="time" type="time" hour-format="12" lang="tr" />

<!-- Japanese: shows 午前 / 午後 buttons -->
<DatePicker v-model="time" type="time" hour-format="12" lang="ja" />

Usage

vue

<!-- Set language via lang prop -->
<DatePicker v-model="date" lang="ja" />

The lang prop is reactive — changing it updates all labels immediately.

Custom Locale

You can register your own locale at runtime:

import { registerLocale } from "@bturkis/datepicker";
import type { BtLocale } from "@bturkis/datepicker";

const myLocale: BtLocale = {
  code: "sv",
  placeholder: "Välj datum",
  rangePlaceholder: "Välj intervall",
  todayLabel: "Idag",
  clearLabel: "Rensa",
  timeLabel: "Tid",
  nowLabel: "Nu",
  timePlaceholder: "Välj tid",
  datetimePlaceholder: "Välj datum och tid",
  am: "FM",
  pm: "EM",
};

registerLocale(myLocale);

Then use it:

vue

<DatePicker v-model="date" lang="sv" />

How It Works

UI labels (buttons, placeholders) come from the locale object. Calendar data (month names, weekday abbreviations) are generated by Intl.DateTimeFormat using the locale code, which means you get native browser translations automatically — no need to ship month name dictionaries.

// Internal: getWeekDays('ja') →
// Uses Intl.DateTimeFormat('ja-JP', { weekday: 'short' })
// → ['月', '火', '水', '木', '金', '土', '日']

Localization ​

Supported Languages ​

TimePicker Translations ​

12-Hour Format with Localized AM/PM ​

Usage ​

Custom Locale ​

How It Works ​