antd组件DatePicker, RangePicker日期选择器的格式化方法 moment.js

在使用antd的日期选择器时，发现返回的日期格式是moment的默认格式，但是需求是需要前端给后端传送格式为：

startDate = ‘YYYY-MM-DD’

endDate = 'YYYY-MM-DD'

转化前，前端使用 RangePicker 传送的 是一个moment格式的 dateRange 值，所以在这里的需要做到两件事：

1. 将 dateRange 拆分为 startDate 和 endDate;
2. 将 startDate 和 endDate 传递的日期格式化。

首先，我是尝试了直接使用组件的 format 属性 设置：

Notice ：但其实这个格式只作用在了前端日期显示上，并没有改变传回后端的数据格式。

所以有了一下两种方法的尝试：

 //方法一
    values.startDate = moment(values.dateRange[0].format('YYYY-MM-DD');
    values.ENDDate = moment(values.dateRange[1].format('YYYY-MM-DD');

    

//方法二
    values.startDate = values.dateRange[0]._d.toLocalDateString().replace(/\//g,'-');
    values.endDate = values.dateRange[1]._d.toLocalDateString().replace(/\//g,'-');

如果省略replace，则会返回YYYY/MM/DD的格式。 

这两种方法均能达到格式化数据的需求，更推荐方法一，因为方法二在不同的系统容易出现不同的问题，所以方法二需要慎用。

 

import React from 'React';
import { DatePicker } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;

class UserDate extends React.component{

onSubmit = (e) => {
    e.pereventDefault();
    const { form, FormModel, dispatch } = this.props;
    const { detail } = FormModel;
    form.validateFieldsAndScroll((err, values) => {
    if(!err){

    //方法一
    values.startDate = moment(values.dateRange[0].format('YYYY-MM-DD');
    values.endDate = moment(values.dateRange[1].format('YYYY-MM-DD');

    //方法二
    values.startDate = values.dateRange[0]._d.toLocalDateString().replace(/\//g,'-');
    values.endDate = values.dateRange[1]._d.toLocalDateString().replace(/\//g,'-');
    
    dispatch({
        type:xxxx,
        payload:{
            data: values,
            userId: detail.id;        
         }
    })
        .then(this.handleResponse);
  }
});
}

handleResponse = （success） => {
    const { dispatch }= this.props;
    if(success){
        dispatch({ type:yyyy })
        message.success('保存成功')
    }
};

render(){
    const { form, FormModel, dispatch } = this.props;
    const { getFieldDecorator } = form;
    const { detail } = FormModel;


    

        
         { getFieldDecorator('dateRange'),{
             initialValue: detail.dateRange
})()
}
        
    

}
}

export default UserDate;

---