How to format date in React material-ui date-picker?
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.
Dhaval
When I started doing code I was not enthusiasts as much as I am today. it's because of stack overflow who guide me through my journey from nothing to something that I have today about programming. I've experience to work with PHP , MySQL , java script library and frameworks. In the day time I apply my knowledge to solve real life problems and at the night I start learning new things and technology. I'm learning Graph Database (Neo4j) , AngularJs , VueJs , ReactJs . I'm AWS certified. Now I'm enjoying coding and more then coding I love errors. because without errors I can't learn base concept of programming.
Updated on June 13, 2022Comments
-
Dhaval almost 2 years
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? -
Dhaval over 6 yearsgetting this error : TypeError: __WEBPACK_IMPORTED_MODULE_12_moment__(...).formate is not a function
-
Shubham Khatri over 6 yearsThat was a typo in my answer. It should be
format
and notformate