Как использовать материал-пользовательский интерфейс KeyboardDatePicker с момента? - PullRequest
Новая
       71

Как использовать материал-пользовательский интерфейс KeyboardDatePicker с момента?

0 голосов
/ 09 марта 2020

Я использую KeyBoardDatePicker из material-ui-pickers с moment utils для DatePicker. 

import React, { Fragment, useState } from "react";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import moment from "moment";

function KeyboardDatePickerExample(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <MuiPickersUtilsProvider libInstance={moment} utils={MomentUtils}>
        <KeyboardDatePicker
          autoOk={true}
          showTodayButton={true}
          value={selectedDate}
          format="D MMM, YYYY"
          onChange={handleDateChange}
          minDate={moment().subtract(6, "months")}
          maxDate={moment()}
        />
      </MuiPickersUtilsProvider>
    </Fragment>
  );
}

export default KeyboardDatePickerExample;

Но это не работает должным образом.

Во-первых, не отображается формат даты правильно

Initial view of the picker

, и когда я пытаюсь редактировать, он показывает случайный текст и ошибку invalid date format.

View of the picker when I try to edit

Вот песочница , которая воспроизводит проблему.

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

РЕДАКТИРОВАТЬ :

Увидев ответ Нико, я изменил версию date-io/moment на 1.3.13

Теперь формат даты отображается правильно

enter image description here

Но проблема редактирования все еще существует. Что я могу сделать, чтобы это исправить?

1 Ответ

0 голосов
/ 09 марта 2020

Нельзя использовать mui picker v3 и @ data-io / moment v2 вместе. Вы должны использовать v1.x версию @ data-io / moment.
Вот еще некоторые сведения об этом топи c: https://material-ui-pickers.dev/getting-started/installation

С наилучшими пожеланиями
Нико

...