日期和時間選擇器 - 驗證

為使用者輸入新增自訂驗證。

所有日期和時間選擇器都有用於新增驗證約束的 API。預設情況下，如果元件值不符合驗證標準，它們會提供視覺回饋。

無效值回饋

在欄位上，它會啟用其錯誤狀態。

在日曆和時鐘檢視中，無效值會顯示為停用，以防止選取它們。

過去和未來驗證

所有選擇器都支援過去和未來驗證。

disablePast prop 可防止日期選擇器選取今天之前的所有值，以及時間選擇器選取目前時間之前的所有值。對於日期時間選擇器，它將結合兩者。

• 在 day 檢視中，今天之前的所有日期都將無法選取。
• 在 month 和 year 檢視中，今天之前結束的所有值都將無法選取。
• 在 hours 和 minutes 檢視中，目前時間之前結束的所有值都將無法選取。
• 在 seconds 檢視中，目前秒數之前的所有值都將無法選取。

disableFuture prop 可防止日期選擇器選取今天之後的所有值，以及時間選擇器選取目前時間之後的所有值。對於日期時間選擇器，它將結合兩者。

• 在 day 檢視中，今天之後的所有日期都將無法選取。
• 在 month 和 year 檢視中，今天之後開始的所有值都將無法選取。
• 在 hours 和 minutes 檢視中，目前時間之後開始的所有值都將無法選取。
• 在 seconds 檢視中，目前秒數之後的所有值都將無法選取。

日期驗證

以下描述的所有 props 都適用於所有支援日期編輯的元件。

最小和最大日期

minDate prop 可防止選取 props.minDate 之前的所有值。

• 在 day 檢視中，minDate 之前的所有日期都將無法選取。
• 在 month 和 year 檢視中，minDate 之前結束的所有值都將無法選取。

maxDate prop 可防止選取 props.maxDate 之後的所有值。

• 在 day 檢視中，maxDate 之後的所有日期都將無法選取。
• 在 month 和 year 檢視中，maxDate 之後開始的所有值都將無法選取。

停用特定日期

shouldDisableDate prop 可防止選取所有使其返回 true 的日期。

在以下範例中，週末無法選取

在範圍元件中停用特定日期

對於支援日期範圍編輯的元件（DateRangePicker、DateTimeRangePicker），shouldDisableDate prop 接收第二個參數來區分開始日期和結束日期。

在以下範例中，開始日期不能在週末，但結束日期可以。

停用特定月份

shouldDisableMonth prop 可防止選取所有使其返回 true 的月份中的日期。

停用特定年份

shouldDisableYear prop 可防止選取所有使其返回 true 的年份中的日期。

時間驗證

最小和最大時間

minTime prop 可防止選取午夜和 props.minTime 之間的所有值。

maxTime prop 可防止選取 props.maxTime 和午夜之間的所有值。

停用特定時間

shouldDisableTime prop 可防止選取所有使其返回 true 的值。

此回呼函式接收目前檢視和要測試的值

// Disables the hours between 12 AM and 3 PM.
shouldDisableTime={(value, view) =>
  view === 'hours' && value.hour() > 12 && value.hour() < 15
}

// Disables the last quarter of each hour.
shouldDisableTime={(value, view) => view === 'minutes' && value.minute() >= 45}

// Disables the second half of each minute.
shouldDisableTime={(value, view) => view === 'seconds' && value.second() > 30}

// Disable the hours before 10 AM every 3rd day
shouldDisableTime={(value, view) =>
  view === 'hours' && value.hour() < 10 && value.date() % 3 === 0
}

在以下範例中，每小時的最後四分之一無法選取。

日期和時間驗證

最小和最大日期時間

minDateTime prop 可防止選取 props.minDateTime 之前的所有值。

maxDateTime prop 可防止選取 props.maxDateTime 之後的所有值。

顯示錯誤

要渲染目前錯誤，您可以訂閱 onError 回呼函式，該函式在每次錯誤變更時都會被呼叫。然後，您可以使用 TextField 的 helperText prop，將您的錯誤訊息傳遞到您的輸入，如下所示。

嘗試輸入 2022 年第一季內的日期 - 錯誤將會消失。

API

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

• <DateCalendar />
• <DatePicker />
• <DateRangePicker />
• <DateTimePicker />
• <DateTimeRangePicker />
• <DesktopDatePicker />
• <DesktopDateRangePicker />
• <DesktopDateTimePicker />
• <DesktopDateTimeRangePicker />
• <DesktopTimePicker />
• <MobileDatePicker />
• <MobileDateRangePicker />
• <MobileDateTimePicker />
• <MobileDateTimeRangePicker />
• <MobileTimePicker />
• <StaticDatePicker />
• <StaticDateRangePicker />
• <StaticDateTimePicker />
• <StaticTimePicker />
• <TimePicker />