Date Input

Demo

Features

• Root/Label/Control/SegmentGroup/Segment/HiddenInput の 6 anatomy パーツと、年・月・日をそれぞれ独立したセグメントとして編集する状態機械 DateInput を提供する。
• 各 segment は role="spinbutton" + aria-valuemin/aria-valuemax を常に出力し、値が入力済みのときのみ aria-valuenow を追加する（WAI-ARIA spinbutton パターン）。
• 3 セグメントすべてが揃った場合のみ実在する日付か検証する（fail-closed）。存在しない日付（例: 2 月 30 日）は is_invalid が true を返す状態としてセグメント値を保持したまま表示する（値を破棄しない）。
• hidden_input パーツのみが name を持ち、確定済み日付を ISO 8601 文字列としてフォーム送信へ渡す。各 segment 自体は name を持たずフォーム送信に参加しない。
• ark-ui（zag.js date-input machine）の Data Attributes 表と突合し、data-type（year/month/day）・data-value（入力済み）・data-editable（常時）・data-placeholder-shown（未入力）を segment へ、data-focus を control/segment-group へ、data-readonly を全パーツへ追加した（イシュー #1626）。
• Increment/Decrement は境界で wrap-around する（例: year は 9999→0）。PageIncrement/PageDecrement（PageUp/PageDown 相当）・Home/End・Prev/Next（矢印キーでのセグメント間移動相当）・Backspace の状態遷移語彙を提供するが、実 DOM キーイベントへの配線は fandhe-frontend-wasm-full 側の責務（本コンポーネントは状態機械の dispatch 語彙のみを提供する）。
• セグメント値の実在性チェック以外の入力値検証・ロケール依存の日付整形は本コンポーネントの責務外であり、利用者側が担う（docs/policy/intentional-non-adoption.md §3.25）。

API Reference

Arguments

Data Attributes

Examples

実在しない日付（invalid）の表示

年・月・日すべてが揃っても実在しない日付（2 月 30 日）の場合、Day セグメントへ aria-invalid・data-invalid が付与されます。セグメント値自体は保持されたままです。

Custom CSS

headless-ui が出力する data-* 属性を CSS セレクタとして利用する最小例です。

[data-scope="date-input"][data-part="segment"] {
  border-radius: 4px;
  padding: 0 4px;
}

[data-scope="date-input"][data-part="segment"][data-type="year"] {
  min-width: 4ch;
}

[data-scope="date-input"][data-part="segment"][data-placeholder-shown] {
  color: #999;
}

[data-scope="date-input"][data-part="segment-group"][data-focus] {
  outline: 2px solid #06c;
}

[data-scope="date-input"][data-part="root"][data-invalid] [data-part="segment-group"] {
  border-color: #c00;
}

[data-scope="date-input"][data-part="segment"]:focus-visible {
  outline: 2px solid #06c;
  outline-offset: 2px;
}

Accessibility

Keyboard Interactions

WAI-ARIA