日期时间范围选择器

日期时间范围选择器允许用户选择一个日期范围，并明确指定开始和结束时间。

基本用法

入住

–

退房

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

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

按 Enter 开始编辑

组件构成

该组件使用 MultiInputDateTimeRangeField 进行键盘编辑，使用 DateRangeCalendar 进行日期视图编辑，并使用 DigitalClock 进行时间视图编辑。

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

您可以在专门的 API 页面上查看组合组件的可用 props。一些 MultiInputDateTimeRangeField props 在 Picker 组件上不可用，您可以使用 slotProps.field 将它们传递到字段。

非受控值 vs. 受控值

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

非受控选择器

开始

–

结束

受控选择器

开始

–

结束

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

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

按 Enter 开始编辑

可用组件

该组件有三种变体可用

DesktopDateTimeRangePicker 组件最适合鼠标设备和大屏幕。它在弹出窗口内渲染视图，并允许直接在字段内编辑值。
MobileDateTimeRangePicker 组件最适合触摸设备和小屏幕。它在模态框内渲染视图，并且不允许直接在字段内编辑值。
DateTimeRangePicker 组件根据其运行的设备渲染 DesktopDateTimeRangePicker 或 MobileDateTimeRangePicker。

桌面变体

开始

–

结束

移动变体

开始

–

结束

响应式变体

开始

–

结束

<DemoItem label="Desktop variant" component="DesktopDateTimeRangePicker">
  <DesktopDateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Mobile variant" component="MobileDateTimeRangePicker">
  <MobileDateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Responsive variant" component="DateTimeRangePicker">
  <DateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>

<DemoItem label="Desktop variant" component="DesktopDateTimeRangePicker">
  <DesktopDateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Mobile variant" component="MobileDateTimeRangePicker">
  <MobileDateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>
<DemoItem label="Responsive variant" component="DateTimeRangePicker">
  <DateTimeRangePicker
    defaultValue={[dayjs('2022-04-17T15:30'), dayjs('2022-04-21T18:30')]}
  />
</DemoItem>

按 Enter 开始编辑

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

表单 props

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

禁用

开始

–

结束

只读

开始

–

结束

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

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

按 Enter 开始编辑

自定义

渲染 1 到 3 个月

您可以使用 calendars prop 同时渲染最多 3 个月。

1 个日历

开始

–

结束

2 个日历

开始

–

结束

3 个日历

开始

–

结束

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

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

按 Enter 开始编辑

使用单个输入字段

您可以将 SingleInputDateTimeRangeField 组件传递给日期时间范围选择器，以将其用于键盘编辑

<DateTimeRangePicker slots={{ field: SingleInputDateTimeRangeField }} />

<DateTimeRangePicker slots={{ field: SingleInputDateTimeRangeField }} />

按 Enter 开始编辑

自定义字段

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

更改视图渲染器

您可以将不同的视图渲染器传递给日期时间范围选择器，以自定义视图。

使用数字时钟

开始

–

结束

使用模拟时钟

开始

–

结束

<DemoItem label="With digital clock" component="DateTimeRangePicker">
  <DateTimeRangePicker
    views={['day', 'hours']}
    timeSteps={{ minutes: 20 }}
    viewRenderers={{ hours: renderDigitalClockTimeView }}
  />
</DemoItem>
<DemoItem label="With analog clock" component="DateTimeRangePicker">
  <DateTimeRangePicker
    viewRenderers={{
      hours: renderTimeViewClock,
      minutes: renderTimeViewClock,
      seconds: renderTimeViewClock,
    }}
  />
</DemoItem>

<DemoItem label="With digital clock" component="DateTimeRangePicker">
  <DateTimeRangePicker
    views={['day', 'hours']}
    timeSteps={{ minutes: 20 }}
    viewRenderers={{ hours: renderDigitalClockTimeView }}
  />
</DemoItem>
<DemoItem label="With analog clock" component="DateTimeRangePicker">
  <DateTimeRangePicker
    viewRenderers={{
      hours: renderTimeViewClock,
      minutes: renderTimeViewClock,
      seconds: renderTimeViewClock,
    }}
  />
</DemoItem>

按 Enter 开始编辑

本地化

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

验证

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

API

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