日期和时间选择器 - 验证

为用户输入添加自定义验证。

所有日期和时间选择器都有一个 API 用于添加验证约束。默认情况下，如果组件值不符合验证标准，它们会提供视觉反馈。

无效值反馈

在字段上，它启用其错误状态。

在日历和时钟视图上，无效值显示为禁用状态，以防止用户选择。

过去和未来验证

所有选择器都支持过去和未来验证。

disablePast 属性阻止日期选择器选择今天之前的所有值，以及时间选择器选择当前时间之前的所有值。对于日期时间选择器，它将两者结合。

• 在 day 视图中，今天之前的所有日期都将不可选。
• 在 month 和 year 视图中，所有在今天之前结束的值都将不可选。
• 在 hours 和 minutes 视图中，所有在当前时间之前结束的值都将不可选。
• 在 seconds 视图中，所有在当前秒之前的值都将不可选。

disableFuture 属性阻止日期选择器选择今天之后的所有值，以及时间选择器选择当前时间之后的所有值。对于日期时间选择器，它将两者结合。

• 在 day 视图中，今天之后的所有日期都将不可选。
• 在 month 和 year 视图中，所有在今天之后开始的值都将不可选。
• 在 hours 和 minutes 视图中，所有在当前时间之后开始的值都将不可选。
• 在 seconds 视图中，所有在当前秒之后的值都将不可选。

日期验证

以下描述的所有属性都适用于所有支持日期编辑的组件。

最小和最大日期

minDate 属性阻止选择 props.minDate 之前的所有值。

• 在 day 视图中，minDate 之前的所有日期都将不可选。
• 在 month 和 year 视图中，所有在 minDate 之前结束的值都将不可选。

maxDate 属性阻止选择 props.maxDate 之后的所有值。

• 在 day 视图中，maxDate 之后的所有日期都将不可选。
• 在 month 和 year 视图中，所有在 maxDate 之后开始的值都将不可选。

禁用特定日期

shouldDisableDate 属性阻止选择所有返回 true 的日期。

在下面的示例中，周末不可选

在范围组件中禁用特定日期

对于支持日期范围编辑的组件 (DateRangePicker, DateTimeRangePicker)，shouldDisableDate 属性接收第二个参数来区分开始日期和结束日期。

在下面的示例中，开始日期不能在周末，但结束日期可以。

禁用特定月份

shouldDisableMonth 属性阻止选择所有返回 true 的月份中的日期。

禁用特定年份

shouldDisableYear 属性阻止选择所有返回 true 的年份中的日期。

时间验证

最小和最大时间

minTime 属性阻止选择午夜和 props.minTime 之间的所有值。

maxTime 属性阻止选择 props.maxTime 和午夜之间的所有值。

禁用特定时间

shouldDisableTime 属性阻止选择所有返回 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 属性阻止选择 props.minDateTime 之前的所有值。

maxDateTime 属性阻止选择 props.maxDateTime 之后的所有值。

显示错误

要渲染当前错误，您可以订阅 onError 回调，该回调在每次错误更改时调用。然后，您可以使用 TextField 的 helperText 属性将错误消息传递到输入，如下所示。

尝试输入 2022 年第一季度内的日期 - 错误将消失。

API

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

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