feat(opal): type and paste into InputDatePicker like InputCurrency

Merged
RA
2d ago
+338-42

Description

InputDatePicker now types and pastes like InputCurrency.

  • Typing: a separator key (/, - or .) in the month or day splits the segment at the caret. Digits before it stay and get padded (1 becomes 01). Digits after it move to the front of the next segment, and focus moves there. So 1/2/2026 types as it reads. Typing past a full segment is blocked. Other non-digits do nothing.
  • Pasting reads the text as a date in any segment:
    • a whole date fills every segment: 10/19/2026, 10-19-2026, 10.19.2026 or ISO 2026-10-19;
    • digits alone go into the focused segment at the caret, clipped to fit;
    • anything else (10/19, Oct 19 2026, 1/2/26) is ignored.
  • Arabic-Indic digits and invisible direction marks are handled as in InputCurrency.
  • A pasted date commits like a typed one, on blur or Enter.

toAsciiDigits, cleanPastedText and usePendingCaret move from InputCurrency into inputs/segmented.tsx, so both fields share one implementation. InputTime also reads Arabic-Indic digits now.

Changes

TODO


Summary by cubic

InputDatePicker now types and pastes like InputCurrency, so a date can be entered as it reads.

  • Typing a separator (/, -, .) in the month or day splits the segment at the caret: digits before it stay and get padded (1 → 01), digits after it move to the front of the next segment, and focus moves there, so 1/2/2026 fills all three segments. A separator in an empty segment does nothing, keeping 10/19/2026 typing as it reads. Other non-digits do nothing, and typing past a full segment is blocked.
  • Pasting reads the text as a date in any segment: a whole date (10/19/2026, 10-19-2026, 10.19.2026, or ISO 2026-10-19) fills every segment, digits alone go into the focused segment at the caret clipped to fit, and anything else (10/19, Oct 19 2026, 1/2/26) is ignored. A pasted date commits like a typed one, on blur or Enter.
  • Arabic-Indic digits and invisible direction marks are handled as in InputCurrency.

The digit, paste-cleanup, and caret helpers move from InputCurrency into inputs/segmented.tsx so both fields share one implementation; the caret helper is now typed on the segments shape. InputTime also reads Arabic-Indic digits now.

Summary by CodeRabbit

  • New Features

    • Date inputs now support segment-based typing, separator handling, and automatic movement between date fields.
    • Dates can be pasted in supported formats, including MM/DD/YYYY and YYYY-MM-DD.
    • Arabic-Indic and Extended Arabic-Indic digits are recognized in date and numeric inputs.
    • Invalid, incomplete, or overly long input is handled consistently without altering the field unexpectedly.
    • Currency paste handling now provides improved whitespace, formatting, and caret behavior.
  • Documentation

    • Added guidance on date formats, typing, pasting, validation, and commit behavior.