Блог

Я пытаюсь реализовать средство выбора даты в моем проекте React, используя средство выбора даты пользовательского интерфейса Material. Сначала я пытался сделать то, что сказал этот сайт. После того, как это не сработало, я попробовал более простой подход и попробовал то, что сказал этот сайт. Оба этих подхода приводят к этой ошибке:

 Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `AddScreen`.
  

Моя ссылка на CodeSandbox: https://codesandbox.io/s/testing-karmapact-app-bghgp?file=/App.js (Datepicker реализован в /Screens/AddScreen.js )

В вашем коде есть две проблемы:

1. Пакет не соответствует :

   "@date-io/date-fns": "2.10.6",
    "@material-ui/core": "latest",
    "@material-ui/icons": "latest",
    "@material-ui/pickers": "4.0.0-alpha.12"
  

Вместо этого вам нужно использовать эти:

 "@date-io/date-fns": "v1",
    "@material-ui/core": "latest",
    "@material-ui/icons": "latest",
    "@material-ui/pickers": "latest",

  

2. Для использования KeyboardTimePicker вам также необходимо указать MuiPickersUtilsProvider , чего нет.

Вот код для AddScreen

 import "date-fns";
import React from "react";
import Grid from "@material-ui/core/Grid";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardTimePicker,
  KeyboardDatePicker
} from "@material-ui/pickers";

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2014-08-18T21:11:54")
  );

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />
        <KeyboardDatePicker
          margin="normal"
          id="date-picker-dialog"
          label="Date picker dialog"
          format="MM/dd/yyyy"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />
        <KeyboardTimePicker
          margin="normal"
          id="time-picker"
          label="Time picker"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change time"
          }}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

  

Вот рабочая демонстрация: https://codesandbox.io/s/mui-demo-forked-4gvbl?file=/Screens/AddScreen.js:0-946