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

【问题标题】：Setting "DD/MM/YYYY" format in MUI在 MUI 中设置“DD/MM/YYYY”格式
【发布时间】：2021-11-30 15:04:20
【问题描述】：

在我的 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>

【问题讨论】：

你为什么不使用TextField 喜欢这里：codesandbox.io/s/p268w?file=/demo.js 或DesktopDatePicker 喜欢这里：codesandbox.io/s/uuonn?file=/demo.js
@HlebShypula 我确实在日期选择器中使用了inputFormat，但它没有用..后来我通过添加date-fns 包并在日期选择器中设置输入格式解决了这个问题

标签： reactjs date datepicker material-ui

【解决方案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>
     )}
/>

【讨论】：