日期範圍欄位

日期範圍欄位讓使用者可以使用鍵盤選擇日期範圍。

基本用法

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

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