标签：DatePicker obj form val format item initialValues antd 取值

antd的DatePicker组件fuzhishi 需要使用moment，否则会报错，moment依赖自行安装

初始化赋值：

const getDetails = () => {
    form.resetFields()
    let initialValues = {}
    result.data.inputOutPutDTO.buOutputDetailDTOList.forEach((obj) => {
      if (obj.output_form === '60') { // 下拉框
        initialValues[obj.id] = obj.dropDataDic
      } else if (obj.output_form === '40') { // 时间
        // 先进行判断是否能正常格式化，否则报错Invalid date
        initialValues[obj.id] = obj.fillInTheValue === '' ? null : moment(obj.fillInTheValue)
      } else {
        initialValues[obj.id] = obj.fillInTheValue
      }
    })
    console.log('initialValues', initialValues);
    form.setFieldsValue(initialValues)
  }

格式化：

 const format = (value) => { return moment(value).format('yyyy-MM-DD')//将时间格式转成yyyy-MM-DD } 

之前日期不可选：

 const disabledDate = (current) => { return current && current < moment().subtract(1, 'days') //当天之前的不可选，不包括当天

// return current&&current<moment().endOf('day') //当天之前的不可选，包括当天 } 

提交时针对时间格式做处理：

const handleSubmit = () => {
    console.log('handleSubmit');
    form.validateFields()
      .then(val => {

        let arr = []
        //遍历得到所有涉及到DatePicker时间框的对象的Id
        result.data.inputOutPutDTO.buOutputDetailDTOList.forEach((obj) => {
          if (obj.output_form === '40') {
            arr.push(obj.id)
          }
        })

        // 针对提交的value中涉及到DatePicker的时间数据进行格式处理 -> 'YYYY-MM-DD'
        Object.keys(val).map((item) => {
          // arr.indexOf(item) !== -1 ? (val[item] = format(val[item])) : null
          arr.indexOf(item) !== -1 ? (format(val[item]) === 'Invalid date' ? val[item] = '' : val[item] = format(val[item])) : null
        })

        console.log('val', val);
      })
  }

render中的组件：

                            <Item
                              name={obj.id}
                              label={obj.inoutlistDesc}
                              style={{ marginRight: '20px' }}
                              key={index}
                            >
                              <DatePicker disabledDate={disabledDate} format={dateFormat} onChange={dateOnchange} />
                            </Item>

标签：DatePicker,obj,form,val,format,item,initialValues,antd,取值
来源： https://www.cnblogs.com/zihang-cheng/p/16538581.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。