Date Input
fandhe-frontend-pre-styled-ui の date_input mod が提供するスタイル済み Date Input 部品です。
関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API
Demo
年/月/日セグメント入力 DateInput の静的掲示（入力済み・未入力・invalid・disabled・size 各種）。各セグメントは role="spinbutton" + aria-valuemin/max/now（未入力時は valuenow 省略）を持ちます（キーボード操作は wasm 層のスコープ外）。
2026
07
22
yyyy
mm
dd
2024
02
30
2026
01
01
2026
07
22
2026
07
22
2026
07
22
Features
- 年/月/日の 3 セグメント個別入力による日付フィールド
- fail-closed な日付検証（例: 2024-02-30 は実在しないため invalid 状態）
- hidden_input で通常のフォーム送信に載る単一値（ISO 8601）を提供する
Anatomy
root
label
control
segment-group
segment
hidden-inputAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| size | Size | Md | 寸法 variant。 |
| disabled | bool | false | 全セグメントを無効化する。 |
| invalid | bool | false | 3 セグメントいずれかが不正な組み合わせの場合に true。 |
| attrs | Vec<(&str, &str)> | root パーツへ合成する追加属性。 | |
| children | Vec<Node> | root 配下の子ノード（通常 DateSegment 列を含む）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
| control | data-disabled | |
| control | data-invalid | |
| hidden-input | data-disabled | |
| label | data-disabled | |
| label | data-invalid | |
| root | data-disabled | |
| root | data-invalid | |
| segment | data-disabled | |
| segment | data-invalid | |
| segment | data-placeholder | |
| segment-group | data-disabled | |
| segment-group | data-invalid |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-date-input-font-size | var(--fandhe-font-font-size-sm) |
| --fandhe-date-input-segment-size | 2.5rem |
Examples
入力済み・未入力の 2 態
2026-07-22 が入力済みの状態と、3 セグメントとも placeholder 表示の未入力状態を並べます。
2026
07
22
yyyy
mm
dd
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| ArrowUp / ArrowDown | フォーカス中セグメントの値を増減する（wasm 層実装）。 |
| ArrowLeft / ArrowRight | セグメント間をフォーカス移動する（wasm 層実装）。 |
WAI-ARIA
| Attribute | Description |
|---|---|
| aria-invalid | 3 セグメントの組み合わせが実在しない日付の場合に付与する。 |