日期範圍選擇器

日期範圍選擇器讓使用者可以選擇日期範圍。

基本用法

入住

–

退房

<DateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />

<DateRangePicker localeText={{ start: 'Check-in', end: 'Check-out' }} />

按下 Enter 鍵開始編輯

元件組成

此元件使用 MultiInputDateRangeField 進行鍵盤編輯，並使用 DateRangeCalendar 進行檢視編輯。

查看其文件頁面以獲取更多資訊

您可以在專用的 API 頁面上查看組合元件的可用 props。某些 MultiInputDateRangeField props 在 Picker 元件上不可用，您可以使用 slotProps.field 將它們傳遞到欄位。

非受控值與受控值

元件的值可以是未受控或受控的。

非受控選擇器

開始

–

結束

受控選擇器

開始

–

結束

<DemoItem label="Uncontrolled picker" component="DateRangePicker">
  <DateRangePicker
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  />
</DemoItem>
<DemoItem label="Controlled picker" component="DateRangePicker">
  <DateRangePicker
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

<DemoItem label="Uncontrolled picker" component="DateRangePicker">
  <DateRangePicker
    defaultValue={[dayjs('2022-04-17'), dayjs('2022-04-21')]}
  />
</DemoItem>
<DemoItem label="Controlled picker" component="DateRangePicker">
  <DateRangePicker
    value={value}
    onChange={(newValue) => setValue(newValue)}
  />
</DemoItem>

按下 Enter 鍵開始編輯

可用元件

此元件有四種變體可用

DesktopDateRangePicker 元件最適用於滑鼠裝置和大型螢幕。它在 popover 內呈現檢視，並允許直接在欄位內編輯值。
MobileDateRangePicker 元件最適用於觸控裝置和小型螢幕。它在 modal 內呈現檢視，並且不允許直接在欄位內編輯值。
DateRangePicker 元件根據其運行的裝置呈現 DesktopDateRangePicker 或 MobileDateRangePicker。
StaticDateRangePicker 元件在沒有 popover/modal 和欄位的情況下呈現。

桌面變體

開始

–

結束

行動變體

開始

–

結束

響應式變體

開始

–

結束

靜態變體

2022年4月

日一二三四五六

預設情況下，如果媒體查詢 @media (pointer: fine) 匹配，DateRangePicker 元件會呈現桌面版本。這可以使用 desktopModeMediaQuery prop 進行自訂。

表單 props

此元件可以被禁用或唯讀。

已禁用

開始

–

結束

唯讀

開始

–

結束

<DemoItem label="disabled" component="DateRangePicker">
  <DateRangePicker disabled />
</DemoItem>
<DemoItem label="readOnly" component="DateRangePicker">
  <DateRangePicker readOnly />
</DemoItem>

<DemoItem label="disabled" component="DateRangePicker">
  <DateRangePicker disabled />
</DemoItem>
<DemoItem label="readOnly" component="DateRangePicker">
  <DateRangePicker readOnly />
</DemoItem>

按下 Enter 鍵開始編輯

自訂

渲染 1 到 3 個月

您可以使用 calendars prop 同時渲染最多 3 個月。

1 個月曆

開始

–

結束

2 個月曆

開始

–

結束

3 個月曆

開始

–

結束

<DemoItem label="1 calendar" component="DateRangePicker">
  <DateRangePicker calendars={1} />
</DemoItem>
<DemoItem label="2 calendars" component="DateRangePicker">
  <DateRangePicker calendars={2} />
</DemoItem>
<DemoItem label="3 calendars" component="DateRangePicker">
  <DateRangePicker calendars={3} />
</DemoItem>

<DemoItem label="1 calendar" component="DateRangePicker">
  <DateRangePicker calendars={1} />
</DemoItem>
<DemoItem label="2 calendars" component="DateRangePicker">
  <DateRangePicker calendars={2} />
</DemoItem>
<DemoItem label="3 calendars" component="DateRangePicker">
  <DateRangePicker calendars={3} />
</DemoItem>

按下 Enter 鍵開始編輯

使用單個輸入欄位

您可以將 SingleInputDateRangeField 元件傳遞給 Date Range Picker，以將其用於鍵盤編輯。在這種情況下，Picker 元件可以將 name prop 傳遞給輸入。

<DateRangePicker
  slots={{ field: SingleInputDateRangeField }}
  name="allowedRange"
/>

<DateRangePicker
  slots={{ field: SingleInputDateRangeField }}
  name="allowedRange"
/>

按下 Enter 鍵開始編輯

新增快捷鍵

為了簡化範圍選擇，您可以新增快捷鍵。

本週
上週
過去 7 天
本月
下個月
重設

2025年3月

日一二三四五六

2025年4月

日一二三四五六

日期範圍選擇器

基本用法

元件組成

非受控值與受控值

可用元件

表單 props

自訂

渲染 1 到 3 個月

使用單個輸入欄位

新增快捷鍵

自訂欄位

本地化

驗證

月份範圍選擇器 🚧

API