feat(opal): type and paste into InputDatePicker like InputCurrency
Merged
RA
2d ago+338+338+012345678901234567890123456789-42-42-01234567890123456789
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 (1becomes01). Digits after it move to the front of the next segment, and focus moves there. So1/2/2026types 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.2026or ISO2026-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.
- a whole date fills every segment:
- 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, so1/2/2026fills all three segments. A separator in an empty segment does nothing, keeping10/19/2026typing 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 ISO2026-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/YYYYandYYYY-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.