Date Picker

トリガー起点で開閉する日付選択オーバーレイの unstyled 部品です。開閉・配置の基盤は crate::popover と共通で、content の内部に Calendar のパーツ群を合成して月表示・選択 UI を組み立てる想定です。

DatePickerProps（disabled/readonly/invalid/required）を root/label/control/input/trigger/clear_trigger へ一律付与します。data-required は label のみに付与され、input は対応するネイティブ disabled/readonly/required 存在属性と、invalid 時のみ aria-invalid="true" を追加で持ちます。label は for_ 引数（ark htmlFor 準拠）でネイティブ label[for] 関連付けも成立させます。data-scope/data-part/data-state/data-disabled/data-invalid/data-readonly/data-required 等の属性セレクタで自前 CSS を当てられます（例: [data-scope="date-picker"][data-part="input"][data-invalid]）。

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

フォーカストラップ・Escape での閉鎖・外側クリックでの閉鎖・実際の日付整形・フォーム送信処理は本部品の責務外であり、クライアントランタイムまたは利用側が担います。

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

Demo

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

Date

Date (open)

Date (disabled)

Date (invalid, required)

Date (readonly)

Features

Root/Label/Control/Input/Trigger/ClearTrigger/Positioner/Content の 8 anatomy パーツを提供する。positioner/content の開閉・配置は crate::popover と同一の基盤（Disclosure 状態機械）を再利用し、独自のオーバーレイ機構を持たない。
content の内部に crate::calendar::Calendar のパーツ関数群を合成して月表示・日付選択 UI を組み立てる想定であり、本コンポーネント自体は骨組み（開閉・配置）のみを提供する。
input はネイティブ <input type="text">（ISO 8601 YYYY-MM-DD 値）のみで完結し、セグメント式の date_input::DateInput には依存しない（責務が分離されている）。
フォーカストラップ・Escape での閉鎖・外側クリックでの閉鎖・portal はクライアントランタイム側（crate::popover と同じ扱い）の責務であり、本コンポーネントは開閉状態の SSR マークアップのみを提供する。

Anatomy

root
  label
  control
    input
    trigger
    clear-trigger
  positioner
    content

API Reference

Arguments

Name	Type	Default	Description
`state`	`OpenState`	（必須）	popover の開閉状態（`Open`/`Closed`）。`root`/`control`/`trigger`/`positioner`/`content` へ共通で渡す。
`value`	`Option<&str>`	`None`	`input` の現在値（ISO 8601 `YYYY-MM-DD` 形式）。
`disabled`	`bool`	`false`	無効化状態。`input`/`trigger` 双方に反映される。
`controls`	`Option<&str>`	`None`	`Some` のとき `trigger` へ `aria-controls` を付与し、`content` の `id` と関連付ける。

Data Attributes

Part	Attribute	Observed Values
`clear-trigger`	`data-disabled`	（値なし）
`clear-trigger`	`data-invalid`	（値なし）
`clear-trigger`	`data-readonly`	（値なし）
`content`	`data-state`	`closed`, `open`
`control`	`data-disabled`	（値なし）
`control`	`data-invalid`	（値なし）
`control`	`data-readonly`	（値なし）
`control`	`data-state`	`closed`, `open`
`input`	`data-disabled`	（値なし）
`input`	`data-invalid`	（値なし）
`input`	`data-readonly`	（値なし）
`label`	`data-disabled`	（値なし）
`label`	`data-invalid`	（値なし）
`label`	`data-readonly`	（値なし）
`label`	`data-required`	（値なし）
`positioner`	`data-state`	`closed`, `open`
`root`	`data-disabled`	（値なし）
`root`	`data-invalid`	（値なし）
`root`	`data-readonly`	（値なし）
`root`	`data-state`	`closed`, `open`
`trigger`	`data-disabled`	（値なし）
`trigger`	`data-invalid`	（値なし）
`trigger`	`data-readonly`	（値なし）
`trigger`	`data-state`	`closed`, `open`

Examples

開いた状態（Open）

OpenState::Open を渡すと trigger の aria-expanded が "true" になり、positioner/content から hidden 属性が外れます。

Accessibility

Keyboard Interactions

Key	Description
Tab / Space / Enter	`trigger`/`clear_trigger` はネイティブ `<button type="button">` であり、フォーカス・押下操作はブラウザ既定動作で成立する。

WAI-ARIA

Attribute	Description
aria-haspopup	`trigger` へ `"dialog"` を固定付与する。
aria-expanded	`trigger` へ `state.is_open()` を反映する。
aria-controls	`controls` が `Some` のとき `trigger` へ付与し、`content` の `id` と関連付ける。
role	`content` へ `"dialog"` を固定付与する。