or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

core.md index.md instance.md localization.md options.md plugins.md

tile.json

Localization

Internationalization support with 51+ built-in locales and customizable locale objects for global applications.

Locale System

Using Built-in Locales

// Import specific locale
import { French } from "flatpickr/dist/l10n/fr.js";
import { German } from "flatpickr/dist/l10n/de.js";
import { Spanish } from "flatpickr/dist/l10n/es.js";

// Use in instance
flatpickr("#date-fr", {
  locale: French,
  dateFormat: "d/m/Y"
});

// Use by key (if locale is already loaded)
flatpickr("#date-de", {
  locale: "de"
});

Available Locales

Flatpickr includes 51+ built-in locales:

ar - Arabic
ar-dz - Arabic (Algeria)
at - Austrian German
az - Azerbaijani
be - Belarusian
bg - Bulgarian
bn - Bengali
bs - Bosnian
cat - Catalan
ckb - Central Kurdish
cs - Czech
cy - Welsh
da - Danish
de - German
default - English (default)
eo - Esperanto
es - Spanish
et - Estonian
fa - Persian
fi - Finnish
fo - Faroese
fr - French
ga - Irish
gr - Greek
he - Hebrew
hi - Hindi
hr - Croatian
hu - Hungarian
hy - Armenian
id - Indonesian
is - Icelandic
it - Italian
ja - Japanese
ka - Georgian
km - Khmer
ko - Korean
kz - Kazakh
lt - Lithuanian
lv - Latvian
mk - Macedonian
mn - Mongolian
ms - Malay
my - Myanmar
nl - Dutch
nn - Norwegian Nynorsk
no - Norwegian
pa - Punjabi
pl - Polish
pt - Portuguese
ro - Romanian
ru - Russian
si - Sinhala
sk - Slovak
sl - Slovenian
sq - Albanian
sr - Serbian
sv - Swedish
th - Thai
tr - Turkish
uk - Ukrainian
uz - Uzbek
uz-latn - Uzbek (Latin)
vn - Vietnamese
zh - Chinese
zh-tw - Chinese (Traditional)

Locale Interface

interface Locale {
  weekdays: {
    shorthand: [string, string, string, string, string, string, string];
    longhand: [string, string, string, string, string, string, string];
  };
  months: {
    shorthand: [string, string, string, string, string, string, string, string, string, string, string, string];
    longhand: [string, string, string, string, string, string, string, string, string, string, string, string];
  };
  daysInMonth: [number, number, number, number, number, number, number, number, number, number, number, number];
  firstDayOfWeek: number;
  ordinal: (nth: number) => string;
  rangeSeparator: string;
  weekAbbreviation: string;
  scrollTitle: string;
  toggleTitle: string;
  amPM: [string, string];
  yearAriaLabel: string;
  monthAriaLabel: string;
  hourAriaLabel: string;
  minuteAriaLabel: string;
  time_24hr: boolean;
}

Weekdays

weekdays: {
  shorthand: [string, string, string, string, string, string, string];
  longhand: [string, string, string, string, string, string, string];
};

Weekday names starting from Sunday (index 0).

Example (French):

weekdays: {
  shorthand: ["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"],
  longhand: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]
}

Months

months: {
  shorthand: [string, string, string, string, string, string, string, string, string, string, string, string];
  longhand: [string, string, string, string, string, string, string, string, string, string, string, string];
};

Month names from January (index 0) to December (index 11).

Example (Spanish):

months: {
  shorthand: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"],
  longhand: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]
}

Calendar Configuration

daysInMonth: [number, number, number, number, number, number, number, number, number, number, number, number];
firstDayOfWeek: number;

daysInMonth: Days in each month (February adjusted for leap years automatically)
firstDayOfWeek: First day of week (0=Sunday, 1=Monday, etc.)

Text Labels

rangeSeparator: string;
weekAbbreviation: string;
scrollTitle: string;
toggleTitle: string;
amPM: [string, string];

rangeSeparator: Text between dates in range mode (default: " to ")
weekAbbreviation: Week number label (default: "Wk")
scrollTitle: Tooltip for scroll interaction (default: "Scroll to increment")
toggleTitle: Tooltip for AM/PM toggle (default: "Click to toggle")
amPM: AM/PM labels (default: ["AM", "PM"])

Accessibility Labels

yearAriaLabel: string;
monthAriaLabel: string;
hourAriaLabel: string;
minuteAriaLabel: string;

ARIA labels for screen readers.

Date Formatting

ordinal: (nth: number) => string;
time_24hr: boolean;

ordinal: Function returning ordinal suffix (1st, 2nd, 3rd, etc.)
time_24hr: Default 24-hour time format preference

Custom Locales

CustomLocale Type

type CustomLocale = Partial<Locale>;

Partial locale object for customization.

Creating Custom Locales

const customLocale = {
  months: {
    shorthand: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    longhand: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
  },
  weekdays: {
    shorthand: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    longhand: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
  },
  firstDayOfWeek: 1, // Monday
  rangeSeparator: " - ",
  time_24hr: true
};

flatpickr("#custom-locale", {
  locale: customLocale
});

Extending Existing Locales

import { French } from "flatpickr/dist/l10n/fr.js";

const customFrench = {
  ...French,
  rangeSeparator: " → ",
  firstDayOfWeek: 1 // Override to Monday
};

flatpickr("#custom-french", {
  locale: customFrench
});

Global Localization

Global Locale Setting

flatpickr.localize: (l10n: CustomLocale) => void;

Sets global default locale for all new instances.

import { German } from "flatpickr/dist/l10n/de.js";

// Set German as global default
flatpickr.localize(German);

// All new instances will use German
flatpickr("#date1");
flatpickr("#date2");

Accessing Locale Collection

flatpickr.l10ns: { [k in LocaleKey]?: CustomLocale } & { default: Locale };

Collection of all loaded locales.

// Access loaded locales
console.log(flatpickr.l10ns.default); // English locale
console.log(flatpickr.l10ns.fr);      // French (if loaded)

// Add custom locale to collection
flatpickr.l10ns.myCustom = {
  months: { /* ... */ },
  weekdays: { /* ... */ }
};

Locale Usage Examples

Multi-language Application

import { French } from "flatpickr/dist/l10n/fr.js";
import { German } from "flatpickr/dist/l10n/de.js";
import { Spanish } from "flatpickr/dist/l10n/es.js";

const userLang = navigator.language.split('-')[0];
const locales = {
  'fr': French,
  'de': German,
  'es': Spanish
};

flatpickr("#date", {
  locale: locales[userLang] || 'default',
  dateFormat: "d/m/Y"
});

Right-to-Left (RTL) Support

import { Arabic } from "flatpickr/dist/l10n/ar.js";

flatpickr("#date-rtl", {
  locale: Arabic,
  dateFormat: "Y-m-d"
});

// Add RTL CSS
document.querySelector('.flatpickr-calendar').style.direction = 'rtl';

Business Calendar Customization

const businessLocale = {
  firstDayOfWeek: 1, // Monday first
  weekdays: {
    shorthand: ["S", "M", "T", "W", "T", "F", "S"],
    longhand: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
  },
  rangeSeparator: " through ",
  ordinal: (nth) => {
    const s = nth % 100;
    if (s > 3 && s < 21) return "th";
    switch (s % 10) {
      case 1: return "st";
      case 2: return "nd";  
      case 3: return "rd";
      default: return "th";
    }
  }
};

flatpickr("#business-date", {
  locale: businessLocale,
  dateFormat: "F jS, Y"
});

LocaleKey Type

type LocaleKey = 
  | "ar" | "ar-dz" | "at" | "az" | "be" | "bg" | "bn" | "bs" | "cat" 
  | "ckb" | "cs" | "cy" | "da" | "de" | "default" | "eo" | "es" 
  | "et" | "fa" | "fi" | "fo" | "fr" | "ga" | "gr" | "he" | "hi" 
  | "hr" | "hu" | "hy" | "id" | "is" | "it" | "ja" | "ka" | "km" 
  | "ko" | "kz" | "lt" | "lv" | "mk" | "mn" | "ms" | "my" | "nl" 
  | "nn" | "no" | "pa" | "pl" | "pt" | "ro" | "ru" | "si" | "sk" 
  | "sl" | "sq" | "sr" | "sv" | "th" | "tr" | "uk" | "uz" 
  | "uz-latn" | "vn" | "zh" | "zh-tw";

Union type of all available locale keys.