在MUI中设置“DD/MM/YYYY”格式

Question

在我的 MUI 表单中，我使用

DatePicker

来选择用户离开和返回的日期。但是当我使用

.toLocaleDateString()

时，它以

mm-dd-yyyy

格式设置我的日期。但我想将它们设置为

dd-mm-yyyy

格式。为此，我将

'en-GB'

作为

.toLocaleDateString()

中的参数传递。但在 DatePicker

TextField

中，它显示了一个红色边框 Like this 并且预定义的日期（来自状态）也消失了。如果没有参数，它会显示 This，即

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>

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>
     )}
/>

Answer 2

我遇到了同样的问题，我通过导入这个包解决了它

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/

Answer 3

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

Answer 4

只需添加 format="DD/MM/YYYY" 或 format ="DD-MM-YYYY" 作为 DatePicker 的 props 之一。