日期時間範圍欄位

日期時間範圍欄位讓使用者可以使用鍵盤選擇具有明確開始和結束時間的日期範圍。

基本用法

您可以使用單個輸入 (使用 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 開始編輯

非受控與受控值

元件的值可以是未受控或受控的。

非受控欄位

受控欄位

<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

請參閱以下文件，以取得此處提及的元件所有可用屬性和類別的完整參考。