i using material-ui datepicker ponent with redux form. It looks amazing by i have a little issue here. When i change the date it appears in my input field as yyyy-mm-dd. I want to change it so as to appear as dd-mm-yyyy. The datepicker has a property called formatDate which takes a function as an input. So i wrote:

<Field
      name="dateFrom"
      ponent={DatePicker}
      hintText="Ημερομηνία από"
      autoOk
      formatDate={() => moment().format(DD-MM-YYYY)}
    />

but it does not seem to work. Do you have any ideas?

i using material-ui datepicker ponent with redux form. It looks amazing by i have a little issue here. When i change the date it appears in my input field as yyyy-mm-dd. I want to change it so as to appear as dd-mm-yyyy. The datepicker has a property called formatDate which takes a function as an input. So i wrote:

<Field
      name="dateFrom"
      ponent={DatePicker}
      hintText="Ημερομηνία από"
      autoOk
      formatDate={() => moment().format(DD-MM-YYYY)}
    />

but it does not seem to work. Do you have any ideas?

• javascript
• reactjs
• date
• datepicker
• material-ui

• 2 try this formatDate={(date) => moment(date).format('DD-MM-YYYY')}. – Mayank Shukla Commented Oct 3, 2017 at 11:28
• 1 Nice!! Thank you! Make it an asnwer :) – RamAlx Commented Oct 3, 2017 at 11:32

1 Answer 1

As per DOC:

formatDate ====> function ====> This function is called to format the date displayed in the input field, and should return a string.

Signature: function(date: object) => any date: Date object to be formatted. returns (any): The formatted date.

Receive the selected date as an argument of formatDate function, change the format of the date and return the formatter value as a string.

Another change is:

format(DD-MM-YYYY)

DD-MM-YYYY should be a string like this:

format('DD-MM-YYYY')

Write it like this:

<Field
      name="dateFrom"
      ponent={DatePicker}
      hintText="Ημερομηνία από"
      autoOk
      formatDate={(date) => moment(date).format('DD-MM-YYYY')}
/>