form表单中,使用datepicker组件,官方的案例,在form的commit方法中,对时间类型的使用format进行格式化,但是不方便:1)需要确切的知道form.item的name值;2)如果时间类型比较多,需要挨个儿格式化
自己封装一个datepicker
// MyDatePicker.tsx
import React from 'react';
import { DatePicker } from 'antd';
/**
* date类型的数据,查询时直接格式化数据
* @param myMoment
* @param serverFormat
* @returns
*/
const transformMoment = (myMoment, serverFormat) => {
myMoment.toJSON = function () {
serverFormat = serverFormat || 'x';
let value = myMoment.format(serverFormat);
if (serverFormat === 'x') {
value = parseInt(value);
}
return value;
};
return myMoment;
};
const MyDatePicker = (props) => {
const serverFormat = props.serverFormat;
const oldChange = props.onChange;
const newProps = {
...props,
onChange: (date, dateStrings) => {
transformMoment(date, serverFormat);
oldChange(date, dateStrings);
},
};
return <DatePicker {...newProps} />;
};
export default MyDatePicker;
使用:
<MyDatePicker
placeholder='date'
showTime={true/false}
serverFormat={`YYYY-MM-DD${true/false ? ' HH-mm-ss' : ''}`}
/>