Material UI DatePicker 未在 React 中应用 dd/MM/yyyy 格式

Question

我正在开发一个 React 项目，并面临 Material UI DatePicker 组件的问题。尽管将日期格式设置为“dd/MM/yyyy”，但 DatePicker 以“MM/DD/yyyy”格式显示日期。 自定义日期选择器组件：

import React from 'react';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '@mui/x-date-pickers';
import TextField from '@mui/material/TextField';
import esLocale from 'date-fns/locale/es';

const CustomDatePicker = ({ label, value, onChange }) => {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns} locale={esLocale}>
      <DatePicker
        label={label}
        value={value}
        onChange={onChange}
        inputFormat="dd/MM/yyyy"
        renderInput={(params) => <TextField {...params} />}
      />
    </LocalizationProvider>
  );
};

export default CustomDatePicker;

CustomDatePicker的使用：

<FormControl variant="outlined" className="form-field">
  <CustomDatePicker
    label="Fecha de Nacimiento"
    value={fechaNacimiento}
    onChange={(newDate) => setFechaNacimiento(newDate)}
  />
</FormControl>

问题是 DatePicker 中显示的日期格式不是根据配置预期的“dd/MM/yyyy”。相反，它以“MM/DD/yyyy”格式显示。

我已经验证 fechaNacimiento 是一个有效的 Date 对象。我还在西班牙语言环境中使用 date-fns。

任何人都可以帮助我理解为什么日期格式没有按预期应用以及如何修复它？

我尝试在 DatePicker 组件中将 inputFormat 属性设置为“dd/MM/yyyy”，期望以日/月/年格式显示和选择日期。这是我已经实现的：

设置区域设置： 我从 date-fns 导入了西班牙语语言环境，并在 LocalizationProvider 中使用它，以确保日期格式和语言环境设置正确。

配置日期选择器： 我将 DatePicker 配置为 inputFormat="dd/MM/yyyy" 以日/月/年格式显示日期。但是，日期仍然以月/日/年格式显示 (MM/DD/yyyy)。

确保正确的日期对象： 我验证了传递给 DatePicker (fechaNacimiento) 的值是有效的 JavaScript Date 对象。

尽管进行了这些配置，日期仍然以 MM/DD/yyyy 格式显示，而不是预期的 dd/MM/yyyy 格式。我不确定我是否在配置中遗漏了某些内容，或者 DatePicker 组件处理格式的方式是否存在问题。

Answer 1

基于此链接中的Mui文档，您应该在DatePicker上的formt道具上添加views道具：

    //with [email protected]
    import { DatePicker } from "@mui/x-date-pickers/DatePicker";
    import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
    import { LocalizationProvider } from "@mui/x-date-pickers";
    import TextField from "@mui/material/TextField";
    import { es } from "date-fns/locale/es";

    const CustomDatePicker = ({ label, value, onChange }) => {
      return (
        <div style={{ padding: 20 }}>
          <LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={es}>
            <DatePicker
             label={"label"}
             value={value}
             onChange={onChange}
             format="dd/mm/yyyy"
             views={["day", "month", "year"]}
             renderInput={(params) => <TextField {...params} />}
            />
          </LocalizationProvider>
        </div>
      );
    };

    export default CustomDatePicker;

注意： 根据 date-fns 包的版本会有所不同：

// with date-fns v2.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// with date-fns v3.x
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
// with date-fns v2.x
import es from 'date-fns/locale/es';
// with date-fns v3.x
import { es } from 'date-fns/locale/es';

<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={es}>
  {children}
</LocalizationProvider>;