Not sure how getDateStr prop is supposed to work.

[jmaylin]

Here is what the documentation says about getDateStr:

A function to override how to format the date into a String for display, receives a Date instance

Can someone explain me the following behavior?

This works:

<DatePicker
  ...
  format="LL"
/>

This doesn't work (isn't getDateStr supposed to replace format?):

<DatePicker
  ...
  getDateStr={rawDate => moment(rawDate).format('LL')}
/>

This works (and I can save rawDate for something else):

<DatePicker
  ...
  format="LL"
  getDateStr={rawDate => moment(rawDate).format('LL')}
/>

[willswinson]

Same here. Makes no sense. It seems to suggest that you can work with values in the format property and override getDateStr to only change the text displayed in the field.

But, in the getDateStr, if you return a format different than the one specified in "format" property, it gives "Invalid Date".

So...what's the point?

[Airone2000]

Same here. Have a DateTime value from my API. But I want the date to be displayed for french (DD/MM/YYYY). As I choose a different date in the picker, the new displayed data is completely wrong.
This point needs to be clarified.

[pascaloliv]

I have a similar problem.
I want to keep the date={date} with the ISO 8601 format (YYYY-MM-DD).
But only for the display (french version) I want a DD/MM/YYYY format.

[filipef101]

@pascaloliv did you solve that?

[joshreeves]

The issue is not with getDateStr. It is with the onDateChange function. When your date is passed to that function, it comes through in string form based on the return value of getDateStr. It's up to you to convert the date back to the acceptable format of the DatePicker component. Here's a working example which uses the moment library:

<DatePicker
  date={this.state.date}
  format="ddd, MMM D"
  onDateChange={date => (
    this.setState({date: date === "Today" ? moment().format("ddd, MMM D") : date
  )})}
  getDateStr={date => (
    moment().isSame(date, 'day') ? "Today" : moment(date).format("ddd, MMM D")
  )} />

You can see that inside the onDateChange handler I am reversing the conversion being performed in getDateStr. This is the key. If you don't do this, when your DatePicker receives the date prop it is not in the expected format.

[aidanw]

Additionally onDateChange does produce a 'Date' you can use directly.

eg.

onDateChange={(datestr, date) => { this.dateToSeason(moment(date));}}

[jamesbechet]

Thanks @aidanw that fixed it. I made a PR to add it to the readme:
#359

[LucasGarcez]

The documentation is really not very clear. In my case the format I want to use for display is 'DD/ MM/YYYY HH:mm' so I return an object of typemoment()with this format in all places where I manipulate my date and do not use the DatePicker format props:

My initial state to date:

const initalDate = moment(new Date(),'DD/MM/YYYY HH:mm');
this.state = {date: initalDate}

In getDateStr I use the same format:

getDateStr={(date) => {
    const formatDate = moment(date).format('DD/MM/YYYY HH:mm')
    return formatDate;
 }}

So on onDateChange I change my state with a moment() object with the same format :

onDateChange={(date) => {
    let dateMoment = moment(date, 'DD/MM/YYYY HH:mm');
    //So my state continues with an object of type moment();
    this.setState({ date: dateMoment });
 }}