時間範圍欄位

時間範圍欄位讓使用者能使用鍵盤選擇時間範圍。

基本用法

您可以使用單個輸入框 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

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