有什么方法可以使用 Keyboarddatepicker 自动设置日期格式

Question

我们正在使用 material ui Keyboarddatepicker 我们已经使用 react format=DD/MMM/YYYY 中的道具设置了日期格式，因此日期将设置为 10/Jan/2020。 当我们从日期选择器中选择日期时，它工作得很好。 但是当我们手动输入日期或使用其他日期格式（如 dd/mm/yyyy）输入日期时，我们遇到了问题，或者我们输入了数值，那么它应该根据输入的值进行设置，比如我们输入 10122000 那么它应该设置为日期格式，比如2020 年 12 月 10 日。 怎么做请给点建议

我们将日期 dns 库与 ReactJS 一起用于日期格式。 对于键盘日期选择器 如何将所有日期格式转换为我们需要的日期格式。

<MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}> <KeyboardDatePicker autoOk={true} value={selectedDate} format="DD/MMM/YYYY" onChange={handleDateChange} /> </MuiPickersUtilsProvider>

Answer 1

你可以试试这样的东西

function transformDate(inputString) {
  const inputDateUS = new Date(inputString);
  const inputDateFr = new Date(inputDateUS.getFullYear(), inputDateUS.getDate() - 1, inputDateUS.getMonth() + 1)
  const formattedDate = inputDateFr.toLocaleString('default', { day: "numeric", month: "short", year: "numeric" });
  return formattedDate.split(" ").join("/");
}


// 10/01/2020 is transformed correctly
console.log(transformDate("10/01/2020"));

// 10-01-2020 is transformed correctly
console.log(transformDate("10-01-2020"));

如您所见，无论您输入什么欧洲格式日期，该函数都会输出您想要的格式，即DD/MMM/YYYY。

现在您所要做的就是获取日期选择器的输入，将其传递给函数，然后显示输出（将结果返回给日期选择器）。

在your case中，将

value={selectedDate}

替换为

value={transformDate(selectedDate)}

希望有帮助