How to format date in React material-ui date-picker?

Question

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)

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

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

Here's what I've tried:

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);

The console output is still:

BeginDate_1:Tue Nov 14 2017 15:03:43 GMT+0530 (IST)

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

Answer 1

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
}

According to the material-ui/DatePicker docs :

formatDate : function

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.

Signature:

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

Answer 2

Straight from the documentation of DatePicker. Try this

<DatePicker
        floatingLabelText={label}
        errorText={touched && error}
        {...input}
        value = {input.value !== ''? new Date(input.value) : null}
        onChange={(event, value) => input.onChange(value)}
        children={children}
        {...custom}
        inputFormat="MM/dd/yyyy"

    />

inputFormat should usually do the trick. You can change it around the way you want and it can be used for dateTimePicker as well.

For example,

inputFormat="yyyy/MM/dd"

or any other way