DateRangePicker

日付範囲選択コンポーネント。2カ月表示のカレンダーで開始日〜終了日を選択。

インポート

import { DateRangePicker } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { DateRangePicker } from '@caroainc/ui-components/date-range-picker'

基本的な使い方

開始日と終了日を選択するシンプルなパターンです。2カ月分のカレンダーが表示されます。

const [from, setFrom] = useState<Date | undefined>()
const [to, setTo] = useState<Date | undefined>()
 
<DateRangePicker
  from={from}
  to={to}
  onChange={({ from, to }) => { setFrom(from); setTo(to) }}
/>

サイズ

size プロパティでサイズを変更できます。

<DateRangePicker size="sm" from={from} to={to} onChange={handleChange} />
<DateRangePicker size="default" from={from} to={to} onChange={handleChange} />
<DateRangePicker size="lg" from={from} to={to} onChange={handleChange} />

カスタムプレースホルダー

<DateRangePicker
  placeholder="支払期日で絞り込み"
  from={from}
  to={to}
  onChange={handleChange}
/>

無効状態

<DateRangePicker disabled from={from} to={to} onChange={handleChange} />

選択可能な日付の範囲を制限

minDate / maxDate で選択可能な日付範囲を制限できます。より複雑な条件は disabledDates （react-day-pickerのMatcher）で指定できます。いずれもカレンダーUI側の選択抑止のみに適用されます。

const today = new Date()
today.setHours(0, 0, 0, 0)
const maxDate = new Date(today)
maxDate.setDate(maxDate.getDate() + 90)
 
<DateRangePicker
  from={from}
  to={to}
  onChange={handleChange}
  minDate={today}
  maxDate={maxDate}
/>

Props

Prop	Type	Default	Description
`from`	`Date \| undefined`	`-`	開始日
`to`	`Date \| undefined`	`-`	終了日
`onChange*`	`(range: { from: Date \| undefined; to: Date \| undefined }) => void`	`-`	範囲が変更された時のコールバック
`placeholder`	`string`	`"期間を選択"`	プレースホルダーテキスト
`className`	`string`	`-`	追加のクラス名
`disabled`	`boolean`	`false`	無効状態
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	トリガーボタンのサイズ
`minDate`	`Date`	`-`	選択可能な最小日付（カレンダー上でこれより前を無効化）
`maxDate`	`Date`	`-`	選択可能な最大日付（カレンダー上でこれより後を無効化）
`disabledDates`	`Matcher \| Matcher[]`	`-`	追加で無効化する日付の条件（react-day-pickerのMatcher）

id / aria-label / aria-invalid など、上記に無い標準のbutton属性はトリガーボタンへそのまま透過されます（onChange / value / defaultValue は独自の意味を持つため除外されます）。

注意事項

トリガーボタンの高さは sm=32px / default=36px / lg=40px（.claude/rules/components.mdのサイズ体系に統一）。旧実装は sm=32px / default=40px / lg=48px だったため、default / lg を使用している既存箇所は見た目がやや小さくなります
開始日のみ選択した状態でもう一度同じ日をクリックすると単日範囲として扱われ、ポップオーバーは閉じません（終了日を選び直せます）
選択済みの範囲がある場合、トリガー右側の「選択をクリア」ボタン（aria-label="選択をクリア"）で範囲をリセットできます

DateRangePicker

On this page