如何修改Material-UI（React）中DatePicker组件的日期显示格式

你只需在DatePicker组件上添加inputFormat属性即可自定义日期显示格式，注意你用的是date-fns适配器，格式规范里大写MM代表月份，小写mm代表分钟，不要写错格式字符串。

修改后的完整代码如下： #

<LocalizationProvider  dateAdapter={AdapterDateFns}>
      <DatePicker
        onError={(e) => {
          setError(true);
        }}
        label="Date"
        value={infos.date}
        inputFormat="dd/MM/yyyy"
        onChange={(newValue) => {
          setInfos({ ...infos, date: newValue });
          setError(false);
        }}
        renderInput={(params) => (
          <TextField
            color={error ? "error" : "primary"}
            required
            error={error}
            helperText={error ? messageError.date : ""}
            {...params}
          />
        )}
      />
</LocalizationProvider>

补充说明 #

• 如果你使用的是MUI v4及更早版本的DatePicker，将inputFormat属性替换为format即可生效
• 如果需要全局统一所有日期选择器的格式，你可以将DatePicker封装为公共组件，统一传入inputFormat属性，避免每个组件重复配置
• 如果需要同时调整日期选择弹窗内的日历显示语言，可给LocalizationProvider传入对应语言的locale属性即可

内容的提问来源于stack exchange，提问作者Marin