日期范围选择器

日期范围选择器允许用户选择日期范围。

基本用法

入住

–

退房

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

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

按 Enter 开始编辑

组件构成

该组件使用 MultiInputDateRangeField 进行键盘编辑，并使用 DateRangeCalendar 进行视图编辑构建。

查看其文档页面以获取更多信息

您可以在专门的 API 页面上查看组合组件的可用属性。某些 MultiInputDateRangeField 属性在 Picker 组件上不可用，您可以使用 slotProps.field 将它们传递给字段。

非受控值 vs. 受控值

组件的值可以是无受控的或受控的。

非受控选择器

开始

–

结束

受控选择器

开始

–

结束

<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 组件最适合鼠标设备和大屏幕。它在弹窗中渲染视图，并允许直接在字段内编辑值。
MobileDateRangePicker 组件最适合触摸设备和小屏幕。它在模态框中渲染视图，并且不允许直接在字段内编辑值。
DateRangePicker 组件根据运行它的设备渲染 DesktopDateRangePicker 或 MobileDateRangePicker。
StaticDateRangePicker 组件在没有弹窗/模态框和字段的情况下渲染。

桌面变体

开始

–

结束

移动变体

开始

–

结束

响应式变体

开始

–

结束

静态变体

2022年4月

日一二三四五六

默认情况下，如果媒体查询 @media (pointer: fine) 匹配，则 DateRangePicker 组件会渲染桌面版本。这可以使用 desktopModeMediaQuery 属性进行自定义。

表单属性

该组件可以被禁用或只读。

禁用

开始

–

结束

只读

开始

–

结束

<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 属性同时渲染最多 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 组件传递给日期范围选择器，以将其用于键盘编辑。在这种情况下，Picker 组件可以将 name 属性传递给输入。

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

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

按 Enter 开始编辑

添加快捷方式

为了简化范围选择，您可以添加快捷方式。

本周
上周
过去 7 天
本月
下个月
重置

2025年3月

日一二三四五六

2025年4月

日一二三四五六

自定义字段

您可以在自定义字段页面中找到文档。

本地化

有关更多详细信息，请参阅日期格式和本地化以及已翻译的组件文档页面。

验证

有关更多详细信息，请参阅验证文档页面。

月份范围选择器 🚧

月份范围选择器允许设置月份范围。

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。