日期时间范围字段

日期时间范围字段允许用户通过键盘选择具有明确开始和结束时间的日期范围。

基本用法

您可以使用 SingleInputDateTimeRangeField 使用单个输入或使用 MultiInputDateTimeRangeField 使用两个输入来渲染您的日期时间范围字段，如下所示。

入住

–

退房

入住 - 退房

<MultiInputDateTimeRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'Check-in' : 'Check-out',
    }),
  }}
/>
<SingleInputDateTimeRangeField label="Check-in - Check-out" />

<MultiInputDateTimeRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'Check-in' : 'Check-out',
    }),
  }}
/>
<SingleInputDateTimeRangeField label="Check-in - Check-out" />

按 Enter 开始编辑

非受控值 vs. 受控值

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

非受控字段

受控字段

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

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

按 Enter 开始编辑

本地化

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

验证

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

API

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