How to change the format of a reactjs material ui date picker

Question

I just need a super-simple picker where someone can type in the date and/or pick it from a calendar. The material-ui picker meets my needs for that.

However, it shows the date in MM/DD/YYYY (Even though it's internally stored YYYY-MM-DD if you spit out the value of the TextField)

You can see this on the demo here: https://material-ui.com/demos/pickers/

I'd like to have the displayed date be YYYY/MM/DD (or YYYY-MM-DD).

I've tried building a formatDate function, as outlined in many other questions on this and some older docs... but that results in me getting a React does not recognize theformatDateprop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercaseformatdateinstead. error.

This also came up in git discussions and the topic was closed without any real resolution: https://github.com/mui-org/material-ui/issues/10251

Surely there is a way to do this... help?

score 1 · Answer 1 · answered Sep 20 '18 at 01:39

1

This component is built with the <input> tag, and according to this source, "the displayed date format will be chosen based on the set locale of the user's browser".

answered Sep 20 '18 at 01:39

Murilo

173
1
4

Do you know how I might change that? – lowcrawler Sep 20 '18 at 02:19
I think you need to change the browser's language but it didn't work for me. – Murilo Sep 20 '18 at 03:10
Here is the same question of yours but for the tag specifically: https://stackoverflow.com/questions/7372038/is-there-any-way-to-change-input-type-date-format – Murilo Sep 20 '18 at 03:15

score 0 · Answer 2 · answered Sep 20 '18 at 01:39

0

Can you provide a code snippet of what you currently have?

The formatDate callback is the accepted method of converting the value, i'm not sure why you were receiving errors, the correct code snippet is this:

formatDate={(date) => moment(date).format('DD-MM-YYYY')}

answered Sep 20 '18 at 01:39

Tom Rowe

449
2
10

1

I believe this is an old feature, as it no longer works (as noted in my OP) – lowcrawler Sep 20 '18 at 02:20

score 0 · Answer 3 · answered Dec 14 '21 at 14:31

Straight from the documentation of DatePicker. Try this

<DatePicker 
        inputFormat="MM/dd/yyyy"
        hintText="Date of purchase"
        value={this.state.controlledDate}
        onChange={this.props.onChange}
      />

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

How to change the format of a reactjs material ui date picker

3 Answers3