DatePicker

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

<DatePicker />

使い方

import { DatePicker } from "@yamada-ui/react"

import { DatePicker } from "@/components/ui"

import { DatePicker } from "@workspaces/ui"

<DatePicker />

バリアントを変更する

<VStack>
  <For each={["outline", "filled", "flushed", "plain"]}>
    {(variant, index) => (
      <DatePicker
        key={index}
        variant={variant}
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

サイズを変更する

<VStack>
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <DatePicker key={index} size={size} placeholder={`Size (${size})`} />
    )}
  </For>
</VStack>

カラースキームを変更する

<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <DatePicker
        key={index}
        colorScheme={colorScheme}
        today
        defaultValue={new Date(new Date().setDate(1))}
      />
    )}
  </For>
</VStack>

フォーマットを変更する

フォーマットを変更する場合は、formatにオブジェクトを設定します。

const format = useMemo<DatePickerFormat>(
  () => ({
    input: null,
    month: "long",
    weekday: "narrow",
    year: "2-digit",
  }),
  [],
)

return <DatePicker format={format} />

デフォルトの日付を設定する

デフォルトの日付を設定する場合は、defaultValueにDateを設定します。

<DatePicker defaultValue={new Date(1993, 7, 18)} />

デフォルトの入力値を設定する

デフォルトの入力値を設定する場合は、defaultInputValueに文字列を設定します。

<DatePicker defaultInputValue="1993/08/18" />

デフォルトの月を設定する

デフォルトの月を設定する場合は、defaultMonthにDateを設定します。

<DatePicker defaultMonth={new Date("2025-10-01")} />

最小日付を設定する

最小日付を設定する場合は、minDateにDateを設定します。

<DatePicker minDate={new Date(new Date().setDate(1))} />

最大日付を設定する

最大日付を設定する場合は、maxDateにDateを設定します。

<DatePicker maxDate={new Date(new Date().setDate(18))} />

最小と最大の範囲外を許可する

デフォルトでは、最小と最大の日付の範囲外が入力された場合、自動的に最小または最大の日付に置換されます。この制御を無効にし、最小と最大の範囲外を許可する場合は、allowInputBeyondをtrueに設定します。

<DatePicker
  minDate={new Date(new Date().setDate(1))}
  maxDate={new Date(new Date().setDate(18))}
  allowInputBeyond
/>

今日の強調を無効にする

今日の強調を無効にする場合は、todayをfalseに設定します。

<DatePicker today={false} />

特定の曜日を無効にする

特定の曜日を無効にする場合は、excludeDateを使用します。

<DatePicker excludeDate={(date) => [0, 1, 6].includes(date.getDay())} />

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

複数選択を有効する

複数選択を有効にする場合は、multipleをtrueに設定します。

<DatePicker multiple />

複数選択の最大数を設定する

複数選択の最大選択数を設定する場合は、maxに数値を設定します。

<DatePicker max={3} multiple />

複数選択の区切り文字を変更する

複数選択の区切り文字を変更する場合は、separatorに文字列を設定します。デフォルトでは、,が設定されています。

<DatePicker multiple separator=";" />

期間選択を有効にする

期間選択を有効にする場合は、rangeをtrueに設定します。

<DatePicker range />

週の開始曜日を変更する

週の開始曜日を変更する場合は、startDayOfWeekに"sunday"または"monday"を設定します。

<VStack>
  <DatePicker placeholder="sunday" startDayOfWeek="sunday" />
  <DatePicker placeholder="monday" startDayOfWeek="monday" />
</VStack>

週末の曜日を変更する

週末の曜日を変更する場合は、weekendDaysに曜日(数値)の配列を設定します。

<DatePicker weekendDays={[0, 1]} />

パターンを設定する

パターンを設定する場合は、patternに正規表現を設定します。

<DatePicker pattern={/[^\w, ]/g} defaultValue={new Date()} />

入力された値の解析をハンドルする

入力された値の解析をハンドルする場合は、parseDateを使用します。

<DatePicker parseDate={(value) => new Date(value)} />

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

祝日を設定する

祝日を設定する場合は、holidaysにDateの配列を設定します。

const holidays = useMemo(
  () => [
    new Date("2025-01-01"),
    new Date("2025-01-13"),
    new Date("2025-02-11"),
    new Date("2025-02-23"),
    new Date("2025-02-24"),
    new Date("2025-03-20"),
    new Date("2025-04-29"),
    new Date("2025-05-03"),
    new Date("2025-05-04"),
    new Date("2025-05-05"),
    new Date("2025-05-06"),
    new Date("2025-07-21"),
    new Date("2025-08-11"),
    new Date("2025-09-15"),
    new Date("2025-09-23"),
    new Date("2025-10-13"),
    new Date("2025-11-03"),
    new Date("2025-11-23"),
    new Date("2025-11-24"),
    new Date("2026-01-01"),
    new Date("2026-01-12"),
    new Date("2026-02-11"),
    new Date("2026-02-23"),
    new Date("2026-03-20"),
    new Date("2026-04-29"),
    new Date("2026-05-03"),
    new Date("2026-05-04"),
    new Date("2026-05-05"),
    new Date("2026-05-06"),
    new Date("2026-07-20"),
    new Date("2026-08-11"),
    new Date("2026-09-21"),
    new Date("2026-09-22"),
    new Date("2026-10-12"),
    new Date("2026-11-03"),
    new Date("2026-11-23"),
  ],
  [],
)

return <DatePicker holidays={holidays} />

当月外の日付を非表示にする

当月外の日付を非表示にする場合は、dayPropsでスタイルを設定します。

<DatePicker
  calendarProps={{
    dayProps: {
      css: { "&[data-outside]": { opacity: 0, pointerEvents: "none" } },
    },
  }}
/>

オフセットを変更する

オフセットを変更する場合は、gutterまたはoffsetに値を設定します。

<DatePicker gutter={16} />

アニメーションを変更する

アニメーションを変更する場合は、animationSchemeに"block-start"や"inline-end"などを設定します。デフォルトでは、"scale"が設定されています。

<DatePicker animationScheme="inline-start" />

配置を変更する

配置を変更するには、placementにendやstart-centerなどを設定します。デフォルトでは、end-startが設定されています。

<DatePicker
  animationScheme="inline-start"
  placement="center-end"
  rootProps={{ w: "xs" }}
/>

スクロールをブロックする

スクロールをブロックするには、blockScrollOnMountをtrueに設定します。

<DatePicker blockScrollOnMount />

スクロール時にドロップダウンを閉じる場合は、closeOnScrollをtrueに設定します。

<DatePicker closeOnScroll />

変更時にドロップダウンを開くイベントをハンドルする場合は、openOnChangeに関数を設定します。

<DatePicker
  openOnFocus={false}
  openOnChange={(ev) => ev.target.value.length > 1}
/>

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

変更時にドロップダウンを閉じるイベントをハンドルする場合は、closeOnChangeに関数を設定します。

<DatePicker
  openOnFocus={false}
  closeOnChange={(ev) => !ev.target.value.length}
/>

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

フォーカス時にドロップダウンを開かない場合は、openOnFocusをfalseに設定します。

<DatePicker openOnFocus={false} />

クリック時にドロップダウンを開かない場合は、openOnClickをfalseに設定します。

<DatePicker openOnClick={false} />

クリア時にフォーカスしない

クリア時にフォーカスしない場合は、focusOnClearをfalseに設定します。

<DatePicker focusOnClear={false} />

選択時にカレンダーを閉じない

選択時にドロップダウンを閉じない場合は、closeOnSelectをfalseに設定します。

<DatePicker closeOnSelect={false} />

フォーカスが外れた場合に閉じない

フォーカスが外れた場合にドロップダウンを閉じない場合は、closeOnBlurをfalseに設定します。

<DatePicker closeOnBlur={false} />

ESCキーが入力された時にドロップダウンを閉じない

ESCキーが入力された時にドロップダウンを閉じない場合は、closeOnEscをfalseに設定します。

<DatePicker closeOnEsc={false} />

クリアを無効化する

クリアを無効化する場合は、clearableをfalseに設定します。

<DatePicker clearable={false} />

入力を許可しない

入力を許可しない場合は、allowInputをfalseに設定します。

<DatePicker allowInput={false} />

形を変える

<VStack>
  <For each={["rounded", "circle", "square"]}>
    {(shape, index) => (
      <DatePicker
        key={index}
        defaultValue={{
          end: new Date(new Date().setDate(new Date().getDate() + 4)),
          start: new Date(),
        }}
        range
        calendarProps={{ shape }}
      />
    )}
  </For>
</VStack>

無効にする

無効にする場合は、disabledをtrueに設定します。

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant, index) => (
      <DatePicker
        key={index}
        variant={variant}
        disabled
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

読み取り専用にする

読み取り専用にする場合は、readOnlyをtrueに設定します。

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant, index) => (
      <DatePicker
        key={index}
        variant={variant}
        readOnly
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

無効な入力にする

無効な入力にする場合は、invalidをtrueに設定します。

<VStack>
  <For each={["outline", "filled", "flushed"]}>
    {(variant, index) => (
      <DatePicker
        key={index}
        variant={variant}
        invalid
        placeholder={toTitleCase(variant)}
      />
    )}
  </For>
</VStack>

ボーダーの色を変更する

ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。

<VStack>
  <DatePicker focusBorderColor="green.500" placeholder="custom border color" />
  <DatePicker
    invalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>

アイコンをカスタマイズする

<VStack>
  <DatePicker iconProps={{ color: "orange" }} />
  <DatePicker icon={<CalendarDaysIcon />} />
</VStack>

複数選択時の表示をカスタマイズする

<DatePicker
  multiple
  render={({ value, onClear }) => (
    <Tag size="sm" me="{gap}" onClose={onClear}>
      {value}
    </Tag>
  )}
/>

カレンダーをカスタマイズする

カレンダーをカスタマイズして、表示を変更できます。

<VStack>
  <DatePicker>
    <Calendar.Navigation>
      <Calendar.Control justifyContent="flex-start" px="3">
        {({ month }) =>
          `${month.getFullYear()}/${(month.getMonth() + 1).toString().padStart(2, "0")}`
        }
      </Calendar.Control>
      <Calendar.PrevButton gridColumn="6 / 7" />
      <Calendar.NextButton gridColumn="7 / 8" />
    </Calendar.Navigation>

    <Calendar.Month />
  </DatePicker>

  <DatePicker
    calendarProps={{
      day: ({ value }) => (
        <Indicator
          colorScheme="blue"
          size="sm"
          disabled={value.getDate() % 4 !== 0}
          offset="-3px"
          labelProps={{ minBoxSize: "2" }}
        >
          <Text as="span">{value.getDate()}</Text>
        </Indicator>
      ),
    }}
  />
</VStack>

こちらのコードを使用する場合は、"use client"をファイルの上部に追加する必要があります。

制御する

const [value, onChange] = useState<Date | null>(new Date())

return <DatePicker value={value} onChange={onChange} />

Props

Prop	デフォルト	型 / 説明
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	`"outline"`	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`allowInput`	`true`	`boolean` If `true`, allows input.
`allowInputBeyond`	`true`	`boolean` If `true`, allows input of dates beyond the `minDate` and `maxDate` restrictions.
`animationScheme`	`"scale"`	`"none" \| "scale" \| SimplePlacement` The animation of the element.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`blockScrollOnMount`	`false`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`calendarProps`	-	`Calendar.RootProps<Multiple, Range>` The size of the calendar component.
`clearable`	`true`	`boolean` If `true`, display the clear icon.
`clearIcon`	-	`ReactNode` The icon to be used in the clear button.
`closeOnBlur`	`true`	`boolean` If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
`closeOnChange`	`false`	`((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean` If `true`, the date picker will be closed when the input value changes.
`closeOnEsc`	`true`	`boolean` If `true`, the popover will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the popover will hide on scroll.
`closeOnSelect`	`true`	`boolean` If `true`, the list element will be closed when value is selected.
`contentProps`	-	`DatePickerContentProps` Props for content element.
`defaultInputValue`	-	`MaybeInputValue<Range>` The initial value of the input.
`defaultMonth`	`new Date()`	`Date` The initial month of the calendar.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`defaultValue`	-	`NonNullable<MaybeDateValue<Multiple, Range>>` The initial value of the calendar.
`disabled`	`false`	`boolean` If `true`, disables the calendar.
`duration`	`0.2`	`MotionTransitionProps["duration"]` The animation duration.
`elementProps`	-	`InputGroup.ElementProps` The props for the end element.
`elements`	-	`{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined }` Object containing the reference and floating elements.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`excludeDate`	-	`(date: Date) => boolean` Callback function to determine whether the day should be disabled.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`focusOnClear`	`true`	`boolean` If `true`, the input will be focused when the clear icon is clicked.
`format`	-	`DatePickerFormat` The format used for conversion. Check the docs to see the format of possible modifiers you can pass. https://day.js.org/docs/en/display/format#list-of-localized-formats
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`holidays`	-	`Date[]` Define holidays.
`icon`	-	`ReactNode` The icon to be used in the date picker.
`iconProps`	-	`DatePickerIconProps` Props for icon element.
`inputProps`	-	`HTMLStyledProps<"input">` The props for the input element.
`inputValue`	-	`MaybeInputValue<Range>` The value of the input.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`locale`	`"en-US"`	`AnyString \| "ar-AE" \| "bg-BG" \| "cs-CZ" \| "da-DK" \| "de-DE" \| "el-GR" \| "en-GB" \| "en-US" \| "es-ES" \| "et-EE" \| "fi-FI" \| "fr-CA" \| "fr-FR" \| "he-IL" \| "hr-HR" \| "hu-HU" \| ... 18 more ... \| "zh-TW"` The locale of the calendar.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`max`	-	`number` The maximum selectable value.
`maxDate`	`new Date(2099, 11, 31)`	`Date` The maximum possible date.
`middleware`	-	`(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...` Array of middleware objects to modify the positioning or provide data for rendering.
`minDate`	`new Date(1900, 0, 1)`	`Date` The minimum possible date.
`month`	-	`Date` The month of the calendar.
`multiple`	`false`	`Multiple` If `true`, the calendar will be multiple.
`name`	-	`string` The `name` attribute of the input element.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onChange`	-	`(value: MaybeDateValue<Multiple, Range>) => void` The callback invoked when value state changes.
`onChangeMonth`	-	`(value: Date) => void` The callback invoked when month state changes.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onInputChange`	-	`(value: MaybeInputValue<Range>) => void` The callback invoked when input value state changes.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openOnChange`	`true`	`((ev: ChangeEvent<HTMLInputElement>) => boolean) \| boolean` If `true`, the date picker will be opened when the input value changes.
`openOnClick`	`true`	`boolean` If `true`, the combobox will be opened when click on the field.
`openOnEnter`	`true`	`boolean` If `true`, the combobox will be opened when enter is pressed.
`openOnFocus`	`true`	`boolean` If `true`, the date picker will be opened when the input is focused.
`openOnSpace`	`true`	`boolean` If `true`, the combobox will be opened when space is pressed.
`parseDate`	-	`(value: string) => Date \| undefined` Function that converts the input value to Date type.
`pattern`	-	`RegExp` The pattern used to check the input element.
`placeholder`	-	`string` The placeholder for date picker.
`placement`	`"end-start"`	`Direction` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`range`	`false`	`Range` If `true`, enables date range selection.
`readOnly`	`false`	`boolean` If `true`, the combobox will be readonly.
`render`	-	`(props: DatePickerRenderProps) => ReactNode` The function to render the selected date.
`required`	`false`	`boolean` If `true`, the field will be required.
`rootProps`	-	`InputGroup.RootProps` Props for root element.
`selectFocusRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the element that should receive focus when selected.
`selectOnSpace`	`true`	`boolean` If `true`, the item will be selected when space is pressed.
`separator`	`","`	`string` The visual separator between each value.
`startDayOfWeek`	`"monday"`	`StartDayOfWeek` Define the start day of the week.
`strategy`	`"absolute"`	`Strategy` The CSS positioning strategy to use.
`today`	`true`	`boolean` If `true`, highlight today.
`transferFocus`	`true`	`boolean` If `true`, the focus will be transferred to the popover content when the tab key is pressed.
`value`	-	`NonNullable<MaybeDateValue<Multiple, Range>>` The value of the calendar.
`weekendDays`	`[0, 6]`	`number[]` Define weekend days.
`whileElementsMounted`	-	`(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).

アクセシビリティ

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

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

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

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

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

キー	説明	状態
`Enter`	入力値が有効な場合は入力値を選択に反映します。カレンダー内である場合はフォーカスされた日付の選択状態を切り替えます。	-
`Backspace`	最後の選択をクリアします。	-
`Escape`	カレンダーを閉じます。	`closeOnEsc={true}`
`ArrowUp`	カレンダー内である場合はフォーカスを上の日付に1つ移動します。	-
`ArrowDown`	カレンダー内である場合はフォーカスを下の日付に1つ移動します。	-
`ArrowLeft`	カレンダー内である場合はフォーカスを左の日付に1つ移動します。最初の日付の場合は、前の月の最後の日付へ移動します。	-
`ArrowRight`	カレンダー内である場合はフォーカスを右の日付に1つ移動します。最後の日付の場合は、次の月の最初の日付へ移動します。	-
`Home`	カレンダー内である場合はフォーカスを同じ週の最初の日付へ移動します。	-
`End`	カレンダー内である場合はフォーカスを同じ週の最後の日付へ移動します。	-
`PageUp`	カレンダー内である場合はフォーカスを前の月の同日へ移動します。該当日がない場合は、その月内の有効な日付へ移動します。	-
`Shift` + `PageUp`	カレンダー内である場合はフォーカスを前の年の同日へ移動します。該当日がない場合は、その月内の有効な日付へ移動します。	-
`PageDown`	カレンダー内である場合はフォーカスを次の月の同日へ移動します。該当日がない場合は、その月内の有効な日付へ移動します。	-
`Shift` + `PageDown`	カレンダー内である場合はフォーカスを次の年の同日へ移動します。該当日がない場合は、その月内の有効な日付へ移動します。	-
`Space`	カレンダー内である場合はフォーカスされた日付の選択状態を切り替えます。	-

ARIAロールと属性

コンポーネント	ロールと属性	使い方
`DatePickerField`	`role="combobox"`	コンボボックスであることを示します。
	`aria-controls`	カレンダーが開いている場合は関連した`DatePickerContent`の`id`を設定し、閉じている場合は`undefined`を設定します。
	`aria-disabled`	`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-describedby`	`DatePicker`が`Field.Root`内にあり、`Field.Root`に`errorMessage`または`helperMessage`、もしくは`Field.ErrorMessage`または`Field.HelperMessage`が設定されている場合は、その`id`を設定します。
	`aria-expanded`	カレンダーが開いている場合は`"true"`を設定し、閉じている場合は`"false"`を設定します。
	`aria-haspopup="dialog"`	ダイアログが存在することを示します。
	`aria-invalid`	`invalid`が設定されている場合は`"true"`を設定します。
	`aria-readonly`	`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-required`	`required`が設定されている場合は`"true"`を設定します。
`DatePickerContent`	`role="dialog"`	ダイアログであることを示します。
	`aria-hidden`	カレンダーが開いている場合は`"false"`を設定し、閉じている場合は`"true"`を設定します。
`DatePickerIcon`	`role="button"`	`clearable`かつ値がある場合はボタンであることを示します。
	`aria-disabled`	`clearable`かつ値がある場合かつ、`disabled`または`readOnly`が設定されている場合は`"true"`を設定します。
	`aria-label`	`clearable`かつ値がある場合は`"値を消去する"`を設定します。
`Calendar.YearSelect`	`aria-label`	`"年を選択する"`を設定します。
`Calendar.MonthSelect`	`aria-label`	`"月を選択する"`を設定します。
`Calendar.Control`	`role="status"`	ステータスであることを示します。
	`aria-live="polite"`	フォーカスの外側で更新される可能性があることを示します。
`Calendar.Month`	`role="grid"`	グリッドであることを示します。
	`aria-label`	`"2026年2月"`のように、表示されている年月を設定します。
	`aria-multiselectable`	複数選択または期間選択が可能な場合は`"true"`を設定します。
`Calendar.PrevButton`	`aria-label`	`"前の月に移動する"`を設定します。
`Calendar.NextButton`	`aria-label`	`"次の月に移動する"`を設定します。
`CalendarDay`	`aria-label`	`"2026年2月5日木曜日"`のように、日付を設定します。今日の場合は`"今日, 2026年2月5日木曜日"`を設定します。
	`aria-disabled`	日付が無効の場合は`"true"`を設定します。
	`aria-selected`	日付が選択されている場合は`"true"`を設定します。

類似のコンポーネント

Selectは、ユーザーがオプションのリストから値を選択するために使用されるコンポーネントです。

ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

使用しているコンポーネント・フック

Autocompleteは、ユーザーのテキスト入力に応じて候補を表示するために使用されるコンポーネントです。

NativeSelectは、ユーザーがオプションのリストから1つの値を選択するために使用されるコンポーネントです。ブラウザ（ユーザーエージェント）によって提供されるネイティブなドロップダウンリストを表示します。

Inputは、ユーザーからのテキスト入力を取得するために使用されるコンポーネントです。

Popoverは、要素の周りにフローティングして情報を表示するコンポーネントです。

Calendarは、日付を表示または選択するカレンダーのコンポーネントです。

Groupは、複数の要素をまとめて扱うためのコンポーネントです。

Iconは、プロジェクトに使用できる一般的なアイコンコンポーネントです。

Fieldは、フォーム要素に、ラベル、ヘルパーメッセージ、エラーメッセージなどをグループ化するために使用されるコンポーネントです。

Formatは、日付・数値・バイトなどを特定のロケールに合わせてフォーマットするために使用されます。

使用されているコンポーネント・フック

ColorPickerは、ユーザーが色を選択したり任意の色の値を入力するために使用されるコンポーネントです。