时间范围字段

时间范围字段允许用户使用键盘选择时间范围。

基本用法

您可以使用 SingleInputTimeRangeField 以单个输入框渲染时间范围字段，或者使用 MultiInputTimeRangeField 以两个输入框渲染，如下所示。

从

–

至

从 - 至

<MultiInputTimeRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'From' : 'To',
    }),
  }}
/>
<SingleInputTimeRangeField label="From - To" />

<MultiInputTimeRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'From' : 'To',
    }),
  }}
/>
<SingleInputTimeRangeField label="From - To" />

按 Enter 键开始编辑

非受控值 vs. 受控值

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

非受控字段

受控字段

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

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

按 Enter 键开始编辑

本地化

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

验证

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

API

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