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&¤t<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