日期范围字段

日期范围字段允许用户使用键盘选择日期范围。

基本用法

你可以使用 SingleInputDateRangeField 渲染带有一个输入框的日期范围字段，或者使用 MultiInputDateRangeField 渲染带有两个输入框的日期范围字段，如下所示。

出发

–

出发 - 返回

<MultiInputDateRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'Departure' : 'Return',
    }),
  }}
/>
<SingleInputDateRangeField label="Departure - Return" />

<MultiInputDateRangeField
  slotProps={{
    textField: ({ position }) => ({
      label: position === 'start' ? 'Departure' : 'Return',
    }),
  }}
/>
<SingleInputDateRangeField label="Departure - Return" />

按 Enter 开始编辑

非受控值 vs. 受控值

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

非受控字段

受控字段

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

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

按 Enter 开始编辑

本地化

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

验证

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

API

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