CODEWITHSUNDEEP
javascriptreactjsdatedatepickermaterial-ui
RamAlx
RamAlx

Reputation: 7344

Change formatDate in datepicker of material ui

i using material-ui datepicker component 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"
      component={DatePicker}
      hintText="Ημερομηνία από"
      autoOk
      formatDate={() => moment().format(DD-MM-YYYY)}
    />

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

Upvotes: 7

Views: 22460

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104499

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"
      component={DatePicker}
      hintText="Ημερομηνία από"
      autoOk
      formatDate={(date) => moment(date).format('DD-MM-YYYY')}
/>

Upvotes: 10

Related Questions