Material-ui: DatePicker format

Created on 20 Aug 2015 · 7Comments · Source: mui-org/material-ui

This is more a question than a issue, someone can show me a example of how can i change de dateformat to YYYY/MM/DD

I think that the demo page need this example to.

docs v0.x

Source

valinol

Most helpful comment

You need to pass a function that takes a Date and returns a String:

formatDate(date){
  return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
}

render(){
  return <DatePicker formatDate={this.formatDate} />;
}

EDIT: fixed formatting

LyricL-Gitster on 1 Sep 2015

👍12 ❤2

All 7 comments

You've probably solved this by now, but in case someone else has the same issue, there is an optional 'formatDate' prop on DatePicker which the date will be passed through on its way to the TextField.

LyricL-Gitster on 30 Aug 2015

I still have not solved, the props are there but I would like to see a working example, it say you have to pass a function but not in what format.

valinol on 1 Sep 2015

You need to pass a function that takes a Date and returns a String:

formatDate(date){
  return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
}

render(){
  return <DatePicker formatDate={this.formatDate} />;
}

EDIT: fixed formatting

LyricL-Gitster on 1 Sep 2015

👍12 ❤2

So what does formatDate do?

conor909 on 2 Dec 2015

The documentation was greatly improved since this issue was opened. https://github.com/callemall/material-ui/pull/3417 is also adding an example on how to do it.

oliviertassinari on 27 Feb 2016

@conor909 Here is the reference https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

ausrasul on 4 Nov 2016

Hi every one, I am using material ui date-picker from material ui core. It shows january12th(for example) like this I want this format to dd/mm/yy. format. I set initially new Date(); .