react 时间DatePicker处理Ant Design和Ant Design Mobile禁用选项

执着的派大星

已于 2023-03-07 10:43:03 修改

阅读量641

点赞数

文章标签： react.js javascript 前端

于 2023-02-28 15:09:04 首次发布

本文链接：https://blog.csdn.net/weixin_53532986/article/details/129261429

版权

本文介绍了在React项目中，如何处理Ant Design和Ant Design Mobile的DatePicker组件禁用日期选项。针对不同端，如管理端配置表单，手机端和PC端，使用了不同的属性，如mobile的min{}和max{}，以及PC端的disabledDate属性进行禁用日期的设置。

摘要由CSDN通过智能技术生成

react 时间DatePicker处理Ant Design和Ant Design Mobile禁用选项

DatePicker手机端和pc端使用的属性不一样
mobile: min={},max={}
pc: disabledDate=this.disabledDate

管理端配置表单

在这里插入图片描述

手机端代码

{
            //这里的fieldDeclares 是从管理端配置拿到的每一项数据结构
              fieldDeclares && fieldDeclares.length > 0 && fieldDeclares.map((item, index) => {
   
                if (item.visible) return null
                let inputType = null
                let itemLimit = {
   };
                let patt = /max|min/;
                //options为maxappointmentEndTime配置项
                if (item.options && patt.test(item.options)) {
   
                  let conditionKey = item.options.match(patt)[0]; 
                  // conditionKey 返回值为min/max
                  let conditionField = item.options.replace(patt, '');
                  //conditionField 返回值为 appointmentEndTime
                  let targetField = fieldDeclares.find(field => field.fieldName === conditionField);
                  if(conditionKey + '' ==='min') {
   
                  // 这里的moment是时间库moment.js插件
                    itemLimit[conditionKey] = targetField && targetField.value ? new Date(moment(targetField.value)) : new Date();
                  } else {
   
                    itemLimit[conditionKey] = targetField && targetField.value ? new Date(moment(targetField.value)) : undefined;
                  }
                }
                let regExp = item.inputFormat ? eval(item.inputFormat) :