DatePicker

DatePickerは、ユーザーが日付を選択するために使用されるコンポーネントです。

DatePickerは、アクセシビリティに関してWAI-ARIA - Combobox Patternに従います。

FormControlを使用しない場合は、DatePickerにaria-labelまたはaria-labelledbyを設定します。

<DatePicker placeholder="YYYY/MM/DD" aria-label="Birthday" />

Copied!

<VStack gap="sm">
  <Heading as="h3" id="label">
    Birthday
  </Heading>

  <DatePicker placeholder="YYYY/MM/DD" aria-labelledby="label" />
</VStack>

Copied!

キーボード操作

キー	説明	状態
`ArrowUp`	フォーカスを上のセルに1つ移動します。	-
`ArrowDown`	フォーカスを下のセルに1つ移動します。	-
`ArrowLeft`	フォーカスを左のセルに1つ移動します。最初のセルの場合は、次の期間の最後のセルをフォーカスします。	-
`ArrowRight`	フォーカスを右のセルに1つ移動します。最後のセルの場合は、次の期間の最初のセルをフォーカスします。	-
`Home`	最初のセルをフォーカスします。	-
`End`	最後のセルをフォーカスします。	-
`Space`, `Enter`	フォーカスしているセルをアクティブにします。	-
`Escape`	ダイアログを閉じます。	`closeOnEsc={true}`

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`DatePickerField` 内部	`role="combobox"`	コンボボックスであることを示します。
	`aria-haspopup="dialog"`	ダイアログが存在することを示します。
	`aria-expanded`	ダイアログが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
	`aria-controls`	ダイアログが開いている場合は関連した`ColorSelector`の`id`を設定し、閉じている場合は`undefined`を設定します。
	`aria-readonly`	`isReadOnly`が設定されている場合は`"true"`を設定します。
	`aria-disabled`	`isDisabled`が設定されている場合は`"true"`を設定します。
	`aria-invalid`	`isInvalid`が設定されている場合は`"true"`を設定します。
	`aria-required`	`isRequired`が設定されている場合は`"true"`を設定します。
`DatePickerClearIcon` 内部	`role="button"`	ボタンであることを示します。
	`aria-label`	`"Clear value"`を設定します。
`Calendar` 内部	`role="dialog"`	ダイアログであることを示します。
	`id`	`DatePickerField`と関連付けるために使用する`id`。
	`aria-hidden`	ダイアログが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
`CalendarLabel` 内部	`aria-live="polite"`	フォーカスの外側で更新される可能性があることを示します。
`CalendarControlPrev` 内部	`aria-label`	`type`が`"date"`の場合は`"Go to previous month"`を設定し、それ以外は`"Go to previous year"`を設定します。
`CalendarControlNext` 内部	`aria-label`	`type`が`"date"`の場合は`"Go to next month"`を設定し、それ以外は`"Go to next year"`を設定します。
`Month` 内部	`role="grid"`	グリッドであることを示します。
	`aria-label`	`"October 2024"`のように、選択されている年月を設定します。
`MonthList` 内部	`role="grid"`	グリッドであることを示します。
	`aria-label`	`"2024"`のように、選択されている年を設定します。
`YearList` 内部	`role="grid"`	グリッドであることを示します。
	`aria-label`	`"From 2021 to 2032"`のように、年の範囲を設定します。
`Button` 内部	`aria-selected`	項目が選択されている場合は`"true"`を設定し、未選択の場合は`"false"`を設定します。
	`aria-disabled`	項目が無効の場合は`"true"`を設定します。

GitHubでこのページを編集する

前MultiAutocomplete 次MultiDatePicker