reactjsmaterial-uidatepickermui-x-date-picker

How to format mui datepicker to 'mm-Mon-yyyy'?

I am using material-ui and didn't found any method to change the date format for the in-library date picker. So I used different library 'mui/pickers' and still its not formating to the desired format i.e. mm-Mon-yyyy Eg:- 23-Sep-2020.

I tried using date-fns as a util library to parse date with format mm-Mon-yyyy but got an error of invalid format.

Edit Material demo (forked)

Solution

  • You need to use correct format which is dd-MMM-yyyy.

    Also, you should use openTo="year" for Date of Birth and specify views in this order views={["year", "month", "date"]}

    <DatePicker
      disableFuture
      label="Date of birth"
      value={selectedDate}
      onChange={handleDateChange}
      openTo="year"
      format="dd-MMM-yyyy"
      views={["year", "month", "date"]}       
    />