Skip to content
fandhe-frontend
GitHub

Date Input

年・月・日を独立したセグメントとして編集する、WAI-ARIA の spinbutton パターンに従った unstyled 部品です。3 セグメントすべてが揃った場合のみ実在する日付か検証し、存在しない日付（例: 2 月 30 日）はセグメント値を保持したまま invalid 表示に倒します（fail-closed）。

Themes 版（fandhe-frontend-pre-styled-ui）はこの構造へ既定 CSS を追加するだけの薄いラッパーであり、CSS は持ちません。スタイル済みの表示例は Date Input を参照してください。

実在性検証以外の入力値検証・ロケール依存の日付整形・フォーム送信処理は本部品の責務外であり、利用側が担います。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

2026
07
dd

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` を持たずフォーム送信に参加しない。
  • セグメント値の実在性チェック以外の入力値検証・ロケール依存の日付整形は本コンポーネントの責務外であり、利用者側が担う（`docs/policy/intentional-non-adoption.md` §3.25）。

Anatomy

root
  label
  control
    segment-group
      segment
  hidden-input

API Reference

Arguments

NameTypeDefaultDescription
kindDateSegment（必須）Year/Month/Day のいずれか。`aria-label`・未入力時のプレースホルダを内部で決定する。
valueOption<&str>None現在の表示値。`None` のとき `data-placeholder` を付与しプレースホルダを表示する。
min / max&str（必須）`aria-valuemin`/`aria-valuemax` に出力する下限・上限の文字列表現。
flagsDateSegmentFlagsDateSegmentFlags::default()`disabled`/`invalid`/`readonly` の 3 フラグを束ねる構造体。

Data Attributes

PartAttributeObserved Values
segmentdata-placeholder

Examples

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

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

2026
02
30

Accessibility

Keyboard Interactions

KeyDescription
Tab各 `segment`（`div role="spinbutton"`）は `disabled` でない限り `tabindex="0"` を持ち、ブラウザ既定の Tab 順に含まれる。

WAI-ARIA

AttributeDescription
role各 `segment` へ `"spinbutton"` を固定付与する。
aria-valuemin / aria-valuemax各 `segment` へ常に出力する下限・上限。
aria-valuenow`value` が `Some` のときのみ `segment` へ出力する。
aria-invalid`flags.invalid` が `true` のとき `segment` へ `"true"` を付与する。