Localization (Date & Number)

Mode

Skin

Theme

Overview & Philosophy

ln-date and ln-number provide localized date and numeric input masks. ln-date (applied via <input type="date" data-ln-date>) wraps date inputs into a visible locale-formatted text input while synchronizing with a hidden native calendar picker and an ISO-formatted hidden input for clean form submissions. ln-number (applied via data-ln-number) parses digits in real time, formats currency and thousand separators using native Intl.NumberFormat while preserving cursor position, and serializes the raw numeric value for the backend.

In ln-ashlar, these zero-dependency enhancers operate directly on standard HTML inputs without heavy date/math libraries.

The HTML-First Localization Doctrine

Components do not implement complex custom calendar engines or numerical calculators. They progressively enhance standard HTML5 <input type="number">, <input type="date">, and semantic tags (<time>, <strong>, <td>). Formatting and locale rules are offloaded directly to the browser's native Intl.NumberFormat and Intl.DateTimeFormat engines, with instant reactive updates when the parent lang attribute changes.

Key Architectural Advantages

  1. Reactive Locale Cascading: Both components listen for BCP 47 language updates on parent scopes via MutationObserver. Changing the lang attribute instantly triggers a real-time re-format across all child inputs and semantic elements with zero page reload.
  2. Two-Way Value Interception: Overrides native DOM value property descriptors. Reading input.value or assigning programmatic values automatically synchronizes both the visible formatted input and the underlying hidden payload field.
  3. Native Platform Integration: ln-date connects to native browser date pickers (showPicker()) and supports resilient manual typing on blur with smart 2-digit year pivots. ln-number preserves cursor offsets during active typing.
  4. Semantic Accessibility: Format static or dynamic data using standard HTML5 tags (<time datetime="...">, <strong data-ln-number>) to preserve machine readability for screen readers while presenting human-friendly localized formats.

For complete technical specifications, see the ln-number documentation and ln-date documentation.

Attributes Reference

ln-number Attributes

AttributeOn ElementDescription
data-ln-number<input>, <span>, <td>Enables locale-aware number formatting. On inputs, initializes the component.
data-ln-number-decimals="N"<input>, text tagsLocks maximum permitted decimal places (e.g. 2 for currency).
data-ln-number-min="N"<input>Minimum numeric threshold (clamped during input).
data-ln-number-max="N"<input>Maximum numeric threshold (clamped during input).

ln-date Attributes

AttributeOn ElementDescription
data-ln-date="style|pattern"<input>, <time>Keyword (short, medium, long) or pattern (e.g. dd.MM.yyyy, MMMM yyyy). Defaults to medium.
data-ln-date-label="Text"<input>Accessible aria-label override for the calendar picker trigger button.
data-ln-fill-as="prop"<input>Custom field identifier for integration with ln-fill coordinators.
data-ln-date-dict="lang"<ul hidden>Declarative HTML dictionary container for language fallbacks (read via buildDict).
Interactive Locale Playground

Switch locale to see instant real-time format shifts across number and date components.

Number Formatting — ln-number

Real-time locale-aware number formatting. The component creates a hidden input for form submission and formats the visible input with thousand separators.

Non-Input Text Element Formatting (<strong>, <td>)

ln-number can also format static or dynamic text elements directly in HTML according to the active locale.

Raw Text standard: 1234567.89
Result: 1234567.89
Attribute value + 2 decimals: 5000
Result: €5000

Date Formatting — ln-date

Locale-aware date formatting with native browser picker. The component creates a hidden input for form submission and formats the visible input using Intl.DateTimeFormat or custom patterns.

Semantic Text Element Formatting (<time>, <td>)

For semantic HTML5 accessibility, use <time datetime="..."> elements with data-ln-date.

Medium format: <time datetime="2026-07-25">
Result:
Long format: <time datetime="2026-07-25">
Result:
Custom pattern: dd.MM.yyyy
Result: