DateTimePicker之禁用当前日期时间之前的数据以及校验函数

本文主要是介绍DateTimePicker之禁用当前日期时间之前的数据以及校验函数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、禁用当前日期时间功能效果

2、需要用到的属性

1. disabledDate: 禁用日期。
2. disabledTime: 禁用时间。

3、相关代码

fieldProps={{disabledDate(date) {return date && date < moment().startOf('day');},disabledTime: (date: any) => disabledTime(date),}}//相关函数-----------------------------/*** 根据传入参数生成一个数组* @param start 数组起始值* @param end 数组截止值*/const range = (start: number, end: number) => {const result = [];for (let i = start; i < end; i++) {result.push(i);}return result;};/*** dateTimePicker的禁用时间设置* @param dates 日期组件选中时间* @param disabledDate 禁用时间的起点，默认为当前时间* @param options { isNeedAddHour: 是否需要加小时，addHourNum：要加多少小时}*/const disabledTime = (dates: any,disabledDate = new Date(),options = {isNeedAddHour: false,addHourNum: 0,},) => {let curDate = disabledDate;let hours = curDate.getHours() + options.addHourNum;let minutes = curDate.getMinutes();let seconds = curDate.getSeconds();//获取选择的时间let selHours = moment(dates).hours();let selMinutes = moment(dates).minutes();if (dates && moment(dates).date() === moment().date()) {//判断选中的是当天return {disabledHours: () => range(0, hours), // 禁用当前小时之前的小时disabledMinutes: () => {if (selHours != null && selHours === hours) {//判断选中的是当前小时return range(0, minutes);}return [];},disabledSeconds: () => {if (selMinutes != null && selMinutes === minutes) {//  判断选中的是当前分钟return range(0, seconds);}return [];},};}return {disabledHours: () => [],disabledMinutes: () => [],disabledSeconds: () => [],};};

4、如果当前表单中有两个DateTimePicker，且后一个要根据前一个进行禁用、校验相关的配置的话

第二个组件的禁用、校验设置可以这么写

//禁用
fieldProps={{disabledDate(date) {// 没选择计划发车时间，就默认禁用今天之前的时间// 选择了就禁用planDate之前的时间let selectedPlanData =editFormRef.current.getFieldValue('planDate');return !!selectedPlanData? date &&date < moment(new Date(selectedPlanData)).startOf('day'): date && date < moment().startOf('day');},disabledTime: (date: any) => {let selectedPlanData =editFormRef.current.getFieldValue('planDate');return disabledTime(date,new Date(!!selectedPlanData ? selectedPlanData : null),{isNeedAddHour: true,addHourNum: 2,},);},
}}
// 校验
rules={[{validator(rule, value, callback) {let selectedPlanDate =editFormRef.current.getFieldValue('planDate');if (!value) {callback('不能为空');} else if (moment(value).isBefore(moment())) {return callback('时间不能小于当前时间');} else if (moment(value).isBefore(moment(selectedPlanDate))) {callback('时间不能小于计划发车时间');} else if (moment(value).isAfter(moment(selectedPlanDate)) &&moment(value).isBefore(moment(selectedPlanDate).add(2, 'hours'),)) {callback('至少大于计划发车时间两小时');} else {callback();}},},
]}

这篇关于DateTimePicker之禁用当前日期时间之前的数据以及校验函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---