Я не могу получить Material UI DatePicker для правильного разбора дат в Великобритании - PullRequest
Новая
       72

Я не могу получить Material UI DatePicker для правильного разбора дат в Великобритании

0 голосов
/ 04 апреля 2020

Насколько я понимаю, если я хочу, чтобы 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;

.. будет отображать дату «4 февраля 2020 года», когда она должна отображать «2 апреля 2020 года» ".

Что я делаю не так?

Ответы [ 2 ]

0 голосов
/ 05 апреля 2020

Ниже приведен пример с привязкой часовых поясов к UT C. Вы можете сделать то же самое с любым другим часовым поясом https://gist.github.com/sibelius/37e7780c2a4a85ba1fea0b5cff196565

0 голосов
/ 04 апреля 2020

Похоже, это относится к нативному JS Дата, неправильно разбирающая даты в ГБ. Единственный способ решить эту проблему - обернуть DatePicker в 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;
...