在MUI中设置日期格式为"DD/MM/YYYY"

Question

在我的MUI表单中，我使用DatePicker来选择用户的出发和返回日期。但是当我使用.toLocaleDateString()时，它将我的日期设置为mm-dd-yyyy格式。但我想将它们设置为dd-mm-yyyy格式。为此，我在.toLocaleDateString()中传递了'en-GB'作为参数。但是在DatePicker的TextField中，它显示一个红色边框像这样，预定义的日期（来自状态）也消失了。如果没有参数，它会显示mm-dd-yyyy格式这个。从类似的先前问题中，我甚至尝试了通过moment包来设置dt变量为moment(new Date()).format("DD/MM/YYYY")，但仍然在文本字段周围显示红色边框。我知道这个问题以前被问过很多次，我看了所有的解答，但没有找到解决办法。

日期选择器

const dt = new Date().toLocaleDateString();
  console.log(dt);
  const [formData, setFormData] = useState({
    from: "",
    to: "",
    depart: dt,
    return: dt,
    noOfPassenger: 1,
    tripType: "Return",
  });

   {/* App component  */}
       <div className="dates">
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DatePicker
              label="Departure Date"
              disablePast
              onChange={(e) =>
                setFormData({
                  ...formData,
                  depart: e.toLocaleDateString(),
                })
              }
              value={formData.depart}
              renderInput={(params) => <TextField {...params} required />}
            />
          </LocalizationProvider>
        </div>

- buzz

---

为什么不像这里一样使用 TextField：https://codesandbox.io/s/p268w?file=/demo.js 或者像这里一样使用 DesktopDatePicker：https://codesandbox.io/s/uuonn?file=/demo.js - Hleb Shypula

@HlebShypula 我在日期选择器中使用了 inputFormat，但它没有起作用。后来我通过添加 date-fns 包并在日期选择器中设置输入格式来解决了这个问题。 - buzz

Answer 1

在我的案例中，我使用了一个DateRangePicker，但是所有的选择器都适用相同的方法。只需像下面这样设置inputFormat:

<DateRangePicker
     startText={t`From`}
     endText={t`To`}
     value={dateValue}
     inputFormat="dd.MM.yyyy"
     onChange={(newValue) => {
         setDateValue(newValue);
         console.log(newValue);
     }}
     renderInput={(startProps, endProps) => (
        <React.Fragment>
            <TextField {...startProps} />
            <TextField {...endProps} />
        </React.Fragment>
     )}
/>

- Ceatry

---

在MUI版本6.x+中，使用format而不是inputFormat。 - ruwan800

Answer 2

Emanuel Avram已经给出了一个很好的答案。我只是想补充一下。 组件的值（日期）必须具有内部定义的相同格式，因此使用"toLocaleString()"而不更改内部格式是没有用的。请使用"inputFormat"属性。

// "dd" = "Su", "Mo", ..., "Sa"
// "DD" = "01", "02", ..., "31"
inputFormat="dd/MM/YYYY" // Tu/09/2022
inputFormat="DD/MM/YYYY" // 09/13/2022

<DatePicker
    label="Departure Date"
    inputFormat="DD-MM-YYYY" // 13-09-2022
    onChange={(e) =>
        setFormData({
            ...formData,
            depart: e.toLocaleDateString(),
        })
    }
    value={formData.depart}
    renderInput={(params) => <TextField {...params} required />}
/>

- Dhenyson Jhean

Answer 3

我遇到了同样的问题，通过导入这个包 import 'dayjs/locale/en-gb'; 我解决了它。

这里是一个例子：

'use client'; //  skip this if you're not using NextJs

import React, { ReactNode } from 'react';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import 'dayjs/locale/en-gb';

interface Props {
  children: ReactNode;
}

export default function MuiLocalizationProvider({ children }: Props) {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en-gb">
      {children}
    </LocalizationProvider>
  );
}

添加提供者后，您现在可以像这样使用日期选择器

const [dueDate, setDueDate] = useState<Dayjs | null>(null);
<DatePicker
  label="Due Date"
  value={dueDate}
  onChange={(newDueDate) => setDueDate(newDueDate)}
/>

更多详情请参考https://mui.com/x/react-date-pickers/adapters-locale/

- Bablu Ahmed