CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Efe Nadir
Efe Nadir

Reputation: 43

Change the format of the datepicker to weekday - material ui

I want to change the format of the datepicker to weekday (Monday, Tuesday,..) The default version of the datepicker format is format="MM/dd/yyyy" Is it possible to change it?

Source code: 


<MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />

Upvotes: 0

Views: 3318

Answers (1)

Michael
Michael

Reputation: 1872

You can change the format value of KeyboardDatePicker to format="EE - MM/dd/yyyy" show the weekdays with month/date/year. Moreover, if you want to change the format of KeyboardDatePicker you can refer to here.Try this:

<KeyboardDatePicker
  disableToolbar
  variant="inline"
  format="EE-MM/dd/yyyy"
  margin="normal"
  id="date-picker-inline"
  label="Date picker inline"
  value={selectedDate}
  onChange={handleDateChange}
  KeyboardButtonProps={{
    'aria-label': 'change date',
  }}
/>

Upvotes: 1

Related Questions