Date Input

fandhe-frontend-pre-styled-ui の date_input mod が提供するスタイル済み Date Input 部品です。

Demo

年/月/日セグメント入力 DateInput の静的掲示（入力済み・未入力・invalid・disabled・readonly・size 各種）。各セグメントは role="spinbutton" + aria-valuemin/max/now（未入力時は valuenow 省略）を持ちます（キーボード操作は wasm 層のスコープ外）。

Date

2026

Date

yyyy

Date

2024

Date

2026

Date

2026

Date

2026

Date

2026

Date

2026

Features

年/月/日の 3 セグメント個別入力による日付フィールド
fail-closed な日付検証（例: 2024-02-30 は実在しないため invalid 状態）
hidden_input で通常のフォーム送信に載る単一値（ISO 8601）を提供する

Anatomy

root
  label
  control
    segment-group
      segment
    hidden-input

API 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`	（値なし）
`control`	`data-readonly`	（値なし）
`hidden-input`	`data-disabled`	（値なし）
`label`	`data-disabled`	（値なし）
`label`	`data-invalid`	（値なし）
`label`	`data-readonly`	（値なし）
`root`	`data-disabled`	（値なし）
`root`	`data-invalid`	（値なし）
`segment`	`data-disabled`	（値なし）
`segment`	`data-editable`	（値なし）
`segment`	`data-invalid`	（値なし）
`segment`	`data-placeholder-shown`	（値なし）
`segment`	`data-readonly`	（値なし）
`segment`	`data-type`	`day`, `month`, `year`
`segment`	`data-value`	（値なし）
`segment-group`	`data-disabled`	（値なし）
`segment-group`	`data-invalid`	（値なし）
`segment-group`	`data-readonly`	（値なし）

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 表示の未入力状態を並べます。

Date

2026

Date

yyyy

Accessibility

Keyboard Interactions

Key	Description
ArrowUp / ArrowDown	フォーカス中セグメントの値を増減する（wasm 層実装）。
ArrowLeft / ArrowRight	セグメント間をフォーカス移動する（wasm 層実装）。

WAI-ARIA

Attribute	Description
aria-invalid	3 セグメントの組み合わせが実在しない日付の場合に付与する。