2021/03/15 antd日期组件使用注意事项

2021/03/15
antd日期组件 DatePicker
使用方式：<DatePicker /> 报错 原因：没有给picker属性赋值，这个组件一定要加上picker属性，尽管它默认是date，但依旧要写上去
picker有5个可选值：date | week | month | quarter | year，分别对应：日期|周|月|季度|年
而且他有个属性：format格式化日期的，设置了没有效果，这个组件返回来的值会带有T和Z；
百度：T是代表后面跟着“时间”。Z代表0时区，这是UTC统一时间。
你需要在把数据设置给form表单的逻辑中将该组件的返回值手动格式化，简而言之自己写逻辑格式化；
想将数据显示在该组件上，写成'2012-02-02 00:00:00'这样也是会报错的，该组件不能传入字符串类型的值，可以通过一个方法moment来实现：
下载moment.js，并导入当前目录下，这个moment是格式化时间用的，
当你点击弹出框时，因为弹出框的日期组件不能接收字符串值，所以在点击弹出框时给对应的日期的值赋值成moment的数据，具体看一下代码：

import moment from 'moment'; // 导入moment

const [treeData, setTreeData] = useState({});
useEffect(() => { // 同步父组件过来的 属性
setTreeData({ ...props.values, transdate: moment(props.values.transdate) }) // 在这里初始化moment的值
}, [props.values]);

// 设置初始数据
form.setFieldsValue(treeData);

为什么要初始化moment值，因为在使用日期组件时，你点击编辑按钮将值传递给日期组件，你的值为字符串类型，但该组件不接受字符串类型，故而报错，有两种解决办法：
1、引入moment，使用它封装的逻辑将你的字符串日期值转发成标准的日期值（含有时区和时间），这种标准的日期值才能被日期组件所接收；
2、直接在将日期值传递给日期组件时将其初始化，比如在同步父组件数据方法中令日期值（）直接为空，这也是可以被日期组件所接受的：
useEffect(() => { // 同步父组件过来的 属性
setTreeData({ ...props.values, transdate: '' }) // 令日期值为空
}, [props.values]);