Date Picker
トリガー起点で開閉する日付選択オーバーレイの unstyled 部品です。開閉・配置の基盤は crate::popover と共通で、content の内部に Calendar のパーツ群を合成して月表示・選択 UI を組み立てる想定です。
Themes 版(fandhe-frontend-pre-styled-ui)はこの構造へ既定 CSS を追加するだけの薄いラッパーであり、CSS は持ちません。スタイル済みの表示例は Date Picker を参照してください。
フォーカストラップ・Escape での閉鎖・外側クリックでの閉鎖・実際の日付整形・フォーム送信処理は本部品の責務外であり、クライアントランタイムまたは利用側が担います。
関連 API: fandhe-frontend-headless-ui API
Demo
枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。
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
contentAPI 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 |
|---|---|---|
| content | data-state | closed |
| control | data-state | closed |
| positioner | data-state | closed |
| root | data-state | closed |
| trigger | data-state | closed |
Examples
開いた状態(Open)
`OpenState::Open` を渡すと `trigger` の `aria-expanded` が `"true"` になり、`positioner`/`content` から `hidden` 属性が外れます。
(Calendar content composed separately)
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"` を固定付与する。 |