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?