antd 使用datepicker数据提交时，格式化

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' : ''}`}
 />

参考
2