Skip to content
fandhe-frontend
GitHub

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
    content

API Reference

Arguments

NameTypeDefaultDescription
stateOpenState(必須)popover の開閉状態(`Open`/`Closed`)。`root`/`control`/`trigger`/`positioner`/`content` へ共通で渡す。
valueOption<&str>None`input` の現在値(ISO 8601 `YYYY-MM-DD` 形式)。
disabledboolfalse無効化状態。`input`/`trigger` 双方に反映される。
controlsOption<&str>None`Some` のとき `trigger` へ `aria-controls` を付与し、`content` の `id` と関連付ける。

Data Attributes

PartAttributeObserved Values
contentdata-stateclosed
controldata-stateclosed
positionerdata-stateclosed
rootdata-stateclosed
triggerdata-stateclosed

Examples

開いた状態(Open)

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

Accessibility

Keyboard Interactions

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

WAI-ARIA

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