Skip to content
Modyra

Internationalization

Four separate concerns: UI strings, date locale, date parsing and time format.

The message catalogue is framework-independent — it lives in @modyra/widgets, so a headless adapter and a rendered one read the same strings. What each framework adds is a way to supply them; the Angular examples below use its dependency injection, and the other adapters pass the messages to their own controls.

The engine itself is locale-free: validator messages are your own strings.

UI strings

Section titled “UI strings”

Built-in presets for en, it, de, fr and es cover every UI string, exported from @modyra/widgets as MDY_I18N_PRESETS. In Angular:

bootstrapApplication(App, {
  providers: [provideModyraLocale("it")],
});
// options: provideModyraLocale("it", { dateLocale: "it-CH", overrides: { noResults: "…" } })

For any other language, supply MDY_I18N_MESSAGES yourself: a plain object of strings and message functions. MDY_I18N_MESSAGES_DEFAULT is the English reference, and every key you leave out falls back to it.

Date locale (calendar)

Section titled “Date locale (calendar)”

provideModyraLocale also configures month/day names and the first day of the week via Intl. Without it, the datepicker detects the browser locale (navigator.language, guarded for SSR). Override explicitly:

providers: [
  { provide: MDY_DATE_LOCALE, useValue: buildDateLocale("it-IT", 1) }, // 1 = Monday
];

Dates — value model and parsing

Section titled “Dates — value model and parsing”
  • The datepicker’s stored value is an ISO calendar date ("2026-12-31"), not a Date instance and not an instant: no timezone conversions happen.
  • With the default displayFormat="localized", typed input is parsed in the locale’s numeric format — 31/12/2026 (it-IT), 12/31/2026 (en-US), 31.12.2026 (de-DE) — day/month order derived from Intl.DateTimeFormat.formatToParts. parseLocalizedDate is exported for reuse. ISO input is accepted everywhere.
  • Two-digit years map to 2000–2099; invalid dates (e.g. Feb 30) are rejected, leap years validated.

Time — value model

Section titled “Time — value model”
  • Default (12h): the timepicker stores "HH:mm AM/PM" strings.
  • format="24h": stores "HH:mm" ("14:30"), hides the AM/PM toggle and accepts 0–23 in the hour input.
  • The stored value is canonical and display-independent within the chosen format; parseAnyTime, to24Hour and formatTimeAs convert between the two.

Locale coverage matrix

Section titled “Locale coverage matrix”
Concern Built-in Overridable via
UI strings en, it, de, fr, es MDY_I18N_MESSAGES (any language)
Month/day names any Intl locale MDY_DATE_LOCALE
First day of week from preset/locale buildDateLocale(locale, firstDay)
Numeric date parsing any Intl locale (d/m/y order) displayFormat, parseLocalizedDate
Time format 12h, 24h format attribute

Right-to-left is supported. The stylesheets use logical properties, overlay positioning takes a direction of "ltr" or "rtl", and both are covered by tests (e2e/rtl.spec.ts, packages/widgets/test/overlay-direction.spec.mjs).

Non-Latin digit input parsing is not. Typing Arabic-Indic or Devanagari digits into a date or number field is untested — treat it as unsupported.

AM/PM abbreviations

Section titled “AM/PM abbreviations”

The 12h period toggle currently renders literal “AM”/“PM” — they are not localized (many locales use different day-period names). Where that matters, use format="24h", which removes the toggle entirely; localized day-period labels are a known gap.