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

Question

在我的 MUI 表单中，我用来DatePicker选择用户离开和返回的日期。但是当我使用.toLocaleDateString()它时，请设置我的日期mm-dd-yyyy格式。但我想将它们设置为dd-mm-yyyy格式。为此，我已将其'en-GB'作为参数传递给.toLocaleDateString(). 但在 DatePicker 中，TextField它显示了一个红色边框，就像这样，预定义的日期（来自状态）也消失了。如果没有参数，它会显示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>
     )}
/>