Date Picker

カレンダーUIを使って日付を選択するフォームコンポーネント。予約日時や締め切り日の入力に使用します。

Basic

jui-date-picker の最も基本的な使用例です。

WAI-ARIA:
- トリガー要素に role="combobox", aria-expanded, aria-haspopup="dialog" を設定。
- カレンダーパネルに role="dialog", aria-modal="true", aria-label を設定。
- 日付セルに aria-selected, aria-current="date"（今日）を設定。
- ラベルとトリガーを aria-labelledby で紐付け。
キーボードナビゲーション:
- Enter / Space: カレンダーの開閉
- ArrowDown: カレンダーを開く
- Escape: カレンダーを閉じる
- ArrowLeft/Right/Up/Down: 日付セル間の移動
- Enter: フォーカス中の日付を選択

このコンポーネント固有のカスタムプロパティはありません。グローバルのデザイントークンを参照してスタイルが適用されます。

機能	用途	Chrome	Firefox	Safari	ステータス
`:focus-visible`	キーボードフォーカスリング	86+	85+	15.4+	Baseline 2022
`::slotted()`	Shadow DOM スロットスタイル	53+	63+	10+	Baseline
CSS Custom Properties	デザイントークン	49+	31+	9.1+	Baseline
`toLocaleDateString()`	ロケール対応日付表示	✅	✅	✅	Widely Available

機能	Baseline 達成	Widely Available
`:focus-visible`	2022年	2024年後半 ✅
CSS Custom Properties	Baseline	Widely Available ✅

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`calendarLabel`	`calendar-label`	カレンダーダイアログの aria-label	`string`	`'カレンダー'`
`disabled`	`disabled`	無効状態か	`boolean`	`false`
`errorMessage`	`error-message`	エラーメッセージ	`string \| undefined`	`undefined`
`firstDayOfWeek`	`first-day-of-week`	週の開始曜日（0=日, 1=月）	`number`	`0`
`format`	`format`	表示フォーマット（YYYY, MM, DD をトークンとして使用）	`string`	`'YYYY-MM-DD'`
`label`	`label`	ラベルテキスト	`string \| undefined`	`undefined`
`locale`	`locale`	ロケール（曜日名等の表示に使用）	`string`	`'ja'`
`max`	`max`	最大日付（ISO 8601 形式）	`string`	`''`
`min`	`min`	最小日付（ISO 8601 形式）	`string`	`''`
`mode`	`mode`	選択モード: date / month / year	`"date" \| "month" \| "year"`	`'date'`
`name`	`name`	フォーム識別用の name 属性	`string`	`undefined`
`placeholder`	`placeholder`	プレースホルダーテキスト	`string`	`'Select date'`
`required`	`required`	必須フィールドか	`boolean`	`false`
`value`	`value`	選択された日付（ISO 8601 形式: YYYY-MM-DD）	`string`	`''`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiChange`	日付選択時に発火	`CustomEvent<{ value: string; date: Date; }>`
`juiClose`	カレンダー閉時に発火	`CustomEvent<void>`
`juiOpen`	カレンダー開時に発火	`CustomEvent<void>`

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS