---
title: DatePicker
description: "`DatePicker`は、ユーザーが日付を選択するために使用されるコンポーネントです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/date-picker
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-datepicker--basic
---

```tsx
<DatePicker />
```

## 使い方

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

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

```tsx
import { DatePicker } from "@workspaces/ui"
```

```tsx
<DatePicker />
```

### バリアントを変更する

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

### サイズを変更する

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

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

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

### フォーマットを変更する

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

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

return <DatePicker format={format} />
```

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

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

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

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

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

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

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

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

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

### 最小日付を設定する

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

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

### 最大日付を設定する

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

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

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

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

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

### 今日の強調を無効にする

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

```tsx
<DatePicker today={false} />
```

### 特定の曜日を無効にする

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

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

### 複数選択を有効する

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

```tsx
<DatePicker multiple />
```

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

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

```tsx
<DatePicker max={3} multiple />
```

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

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

```tsx
<DatePicker multiple separator=";" />
```

### 期間選択を有効にする

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

```tsx
<DatePicker range />
```

### 週の開始曜日を変更する

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

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

### 週末の曜日を変更する

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

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

### パターンを設定する

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

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

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

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

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

### 祝日を設定する

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

```tsx
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`でスタイルを設定します。

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

### オフセットを変更する

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

```tsx
<DatePicker gutter={16} />
```

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

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

```tsx
<DatePicker animationScheme="inline-start" />
```

### 表示位置を変更する

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

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

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

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

```tsx
<DatePicker blockScrollOnMount />
```

### スクロール時にドロップダウンを閉じる

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

```tsx
<DatePicker closeOnScroll />
```

### 変更時にドロップダウンを開くイベントをハンドルする

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

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

### 変更時にドロップダウンを閉じるイベントをハンドルする

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

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

### フォーカス時にドロップダウンを開かない

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

```tsx
<DatePicker openOnFocus={false} />
```

### クリック時にドロップダウンを開かない

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

```tsx
<DatePicker openOnClick={false} />
```

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

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

```tsx
<DatePicker focusOnClear={false} />
```

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

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

```tsx
<DatePicker closeOnSelect={false} />
```

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

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

```tsx
<DatePicker closeOnBlur={false} />
```

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

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

```tsx
<DatePicker closeOnEsc={false} />
```

### クリアを無効化する

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

```tsx
<DatePicker clearable={false} />
```

### 入力を許可しない

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

```tsx
<DatePicker allowInput={false} />
```

### 形を変える

```tsx
<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`に設定します。

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

### 読み取り専用にする

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

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

### 無効な入力にする

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

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

### ボーダーの色を変更する

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

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

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

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

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

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

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

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

```tsx preview client
<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>
```

### 制御する

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

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

## Props

| Prop                   | Default                  | Type                                                                                                                                                                                                                                                                                                | Description                                                                                                                                                                                    |
| ---------------------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...`                                                                                                                                   | 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" \| "ActiveBorder" \| "ActiveCaption" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" \| "amber.400" \| "amber.50" \| "amber.500" ...`                                                                                                                                   | 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.                                                                                           |
| `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: Platform; strategy: Strategy; initialPlacement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<...>; } \| null \| undefined)[]` | 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`). |

## アクセシビリティ

現在、v2の移行に伴い、このセクションは更新中です。