DatePicker

カレンダーポップアップ付き日付入力。TextField トリガーとカレンダーグリッドを組み合わせます。

参考: Material Design 3 公式ガイドライン m3.material.io/components/date-pickers/overview

Import

import { DatePicker, ThemeProvider } from '@m3-baseui/react-tailwind';

使用例

<DatePicker.Root>
  <DatePicker.Field>
    <DatePicker.Input placeholder="YYYY/MM/DD" aria-label="日付" />
    <DatePicker.FieldIcon aria-label="カレンダーを開く">
      <Icon name="calendar_today" />
    </DatePicker.FieldIcon>
  </DatePicker.Field>
  <DatePicker.Portal>
    <DatePicker.Positioner sideOffset={4} align="start">
      <DatePicker.Popup>
        <DatePicker.Calendar value={date} onValueChange={setDate} />
      </DatePicker.Popup>
    </DatePicker.Positioner>
  </DatePicker.Portal>
</DatePicker.Root>

Props

Prop	型	既定値	説明
`DatePicker.Calendar value`	`Date \| null`	—	選択日
`DatePicker.Calendar onValueChange`	`(date: Date) => void`	—	変更コールバック