Mui DatePicker 更改日期格式

Question

我正在尝试自定义 mui DatePicker。我希望日期格式如下：日，日月。 示例：9 月 10 日，星期一 这是我的代码：

  <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>

Answer 1

你需要像format="EEEE, MM MMMM"这样使用fromat：

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