我无法让 Material UI DatePicker 正确解析英国日期

Question

据我了解，如果我希望 MUI DatePicker 正确解析英国日期（先是天，然后是月），我必须将 en-GB 区域设置传递给 MuiPickersUtilsProvider。但是，我这样做的尝试失败了。

下面的代码..

import React from "react";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import DatePicker from "./DatePicker2";
import enGB from "date-fns/locale/en-GB";

const App = () => (
  <MuiPickersUtilsProvider utils={DateFnsUtils} locale={enGB}>
    <DatePicker value={"2/4/2020"} />
  </MuiPickersUtilsProvider>
);

export default App;

..将在应该显示“2020 年 4 月 2 日”时显示日期“2020 年 2 月 4 日”。

我做错了什么？

Answer 1

这似乎与原生 JS 日期未正确解析 GB 日期有关。我可以解决此问题的唯一方法是将 DatePicker 包装在 GbDatePicker 中，该 GbDatePicker 可以正确解析传入的字符串。感觉很老套，所以我对更好的想法很感兴趣..

import { isValid } from 'date-fns';
import React, { useEffect, useState } from 'react';
import { DatePicker as MuiDatePicker } from '@material-ui/pickers';

const GbDatePicker = (props) => {
  const { value, ...other } = props;
  const [intVal, setIntVal] = useState(value);
  const isSynced = intVal === value;

  useEffect(() => {
    if (!isSynced) {
      if (
        typeof value !== 'undefined' &&
        value !== null &&
        value !== '' &&
        isValid(new Date(value))
      ) {
        const delim = value.includes('/')
          ? /\//g
          : value.includes('-')
          ? '-'
          : value.includes(' ')
          ? ' '
          : null;
        if (delim !== null) {
          const parts = value.split(delim);
          if (parts.length === 3 && !isNaN(parts[1])) {
            setIntVal(new Date(parts[2], parts[1] - 1, parts[0]));
          } else {
            setIntVal(new Date(value));
          }
        } else {
          setIntVal(new Date(value));
        }
      }
    }
  }, [value, isSynced]);

  return <MuiDatePicker value={intVal} {...other} />;
};

export default GbDatePicker;

Answer 2

这是一个将选择器时区锁定为 UTC 的示例要点。您可以对任何其他时区执行完全相同的操作 https://gist.github.com/sibelius/37e7780c2a4a85ba1fea0b5cff196565

我无法让 Material UI DatePicker 正确解析英国日期

I can't get Material UI DatePicker to correctly parse UK dates

datepicker

localization

material-ui

locale