Not sure how getDateStr prop is supposed to work.

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?

[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 });
 }}