其他分享
首页 > 其他分享> > antd DatePicker赋值,取值,限制日期的问题

antd DatePicker赋值,取值,限制日期的问题

作者:互联网

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