I am trying to customise the mui DatePicker. I want the date format to be as follows: Day, DD Month. example: Monday, 10 September here is my code:

  <LocalizationProvider dateAdapter={AdapterDateFns} locale={frLocale}>
    <Stack spacing={3}>
      <ThemeProvider theme={calendarTheme}>
        <DatePicker
          disabled={false}
          //the current format
          inputFormat="MM/dd/yyyy"
          leftArrowButtonText={t("notification.previous_month")}
          rightArrowButtonText={t("notification.next_month")}
          minDate={today}
          InputProps={{
            classes: {
              notchedOutline: classes.noBorder,
              root: classes.reverse,
            },
          }}
          components={{
            OpenPickerIcon: Table,
            SwitchViewIcon: ArrowDown,
          }}
          value={value}
          onChange={handlechange}
          renderInput={(params: any) => (
            <TextField
              style={{
                color: "red",
              }}
              {...params}
            />
          )}
        />
      </ThemeProvider>
    </Stack>
  </LocalizationProvider>

CodePudding user response：

You need to use fromat like format="EEEE, MM MMMM":

<DesktopDatePicker
      label="Date desktop"
      inputFormat="EEEE, MM MMMM"
      openTo={"day"}
      value={value}
      onChange={handleChange}
      renderInput={(params) => <TextField {...params} />}
    />