如何在React material-ui date-picker中格式化日期？ [英] How to format date in React material-ui date-picker?

问题描述

我正在使用material-ui date-picker字段实现redux-form。日期在字段中完美设置，但当我尝试将其发送到日期的后端API格式时：

I'm implementing redux-form with a material-ui date-picker field. Date is perfectly set in field but when I try to send it to the back-end API format of the date is:

BeginDate_1：Tue Nov 14 2017 15:03:43 GMT + 0530（IST）

我正在尝试将此格式更改为'YYYY-mm-dd '格式在发送到后端API之前。

I'm trying to change this format to 'YYYY-mm-dd' format before sending it to the the back-end API.

我尝试 momentjs 进行格式化，但我不知道得到我想要的结果。

I tried momentjs for formatting, but I couldn't get the result I wanted.

以下是我的尝试：

Home.js

import React, {Component} from 'react';
import {Field, reduxForm} from 'redux-form';
import DatePicker from 'material-ui/DatePicker';
import {connect} from 'react-redux';
import * as moment  from 'moment';

class Home extends Component {

renderCalendarField= ({
                          input,
                          label,
                          meta: {touched, error},
                          children,
                          ...custom
                      }) => (
    <DatePicker
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        value = {input.value !== ''? new Date(input.value) : null}
        onChange={(event, value) => input.onChange(value)}
        children={children}
        {...custom}
        formatDate={(date) => moment(date).format('YYYY-MM-DD')}

    />

)

render() {

    const startDate = new Date();

    const {handleSubmit} = this.props;

    return (

        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>


            <div>
                <Field name="BeginDate_1" component={this.renderCalendarField} label="DEPARTURE" minDate={startDate} />
            </div>


            <div>
                <button type="submit">
                    Submit
                </button>
            </div>

        </form>

    );

}

}

const LogInForm = reduxForm({
form: 'MaterialUiForm', // a unique identifier for this form
validate
})(Home);

export default connect(mapStateTOProps, {getCity})(LogInForm);

控制台输出仍然是：

BeginDate_1：2017年11月14日星期二15:03:43 GMT + 0530（IST）

我如何格式化日期在 YYYY-mm-dd 格式？

How can I format this date in YYYY-mm-dd format?

推荐答案

formatDate 支持 DatePicker 用于格式 显示日期而不是实际值。您需要做的是，使用时刻格式化 onSubmit 函数中的值

formatDate prop on the DatePicker is used to format the Display Date and not the actual value. What you need to do is, format the the value in the onSubmit function using moment

onSubmit (values) {

   const beginDate = moment(values.BeginDate_1).format('YYYY-MM-DD')
   console.log(beginDate);
   //other things
}

根据 material-ui / DatePicker docs ：

According to the material-ui/DatePicker docs:

formatDate ：function

formatDate: function

调用此函数来格式化日期显示在输入
字段中，并应返回一个字符串。默认情况下，如果没有语言环境，则提供
DateTimeFormat，日期对象的格式为 ISO 8601 YYYY-MM-DD。

This function is called to format the date displayed in the input field, and should return a string. By default if no locale and DateTimeFormat is provided date objects are formatted to ISO 8601 YYYY-MM-DD.

签名：

function(date: object) => any
date: Date object to be formatted.
returns (any): The formatted date.

这篇关于如何在React material-ui date-picker中格式化日期？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！