reactjs - TypeError : utils. endOfDay 不是函数

Question

我是 React 新手，在我的项目中使用 material-ui 日期选择器，来自文档 here .在这我使用moment.js

datetimepicker 中的以下代码

    import React,{ useState }  from 'react';
    import MomentUtils from 'moment';
    import {
        DatePicker,
        TimePicker,
        DateTimePicker,
        MuiPickersUtilsProvider,
     } from "@material-ui/pickers";

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

          return (
             <MuiPickersUtilsProvider utils={MomentUtils}>
             <DatePicker value={selectedDate} onChange= 
              {handleDateChange} />
              <TimePicker value={selectedDate} onChange= 
               {handleDateChange} />
                <DateTimePicker value={selectedDate} onChange= 
              {handleDateChange} />
            </MuiPickersUtilsProvider>
          );
        }
    export default DateTimePickers;

但显示错误

类型错误:utils.endOfDay 不是函数
获取比较最大日期
node_modules/@material-ui/pickers/esm/_helpers/text-field-helper.js:23

  20 |     return date;
  21 |   }
  22 | 
> 23 |   return utils.endOfDay(date);
  24 | };
  25 | 
  26 | var getComparisonMinDate = function 
       getComparisonMinDate(utils, strictCompareDates, date) {

提前致谢 。帮我解决这个问题

Answer 1

导入错误。它应该是:

import MomentUtils from '@date-io/moment';

您可以引用工作 CodeSandbox 演示: https://codesandbox.io/s/material-demo-h3ke7?fontsize=14

澄清:

date-io 提供了对常见 javascript 日期管理库的抽象。 date-io/moment 只是其中之一。 data-io GitHub

您必须同时安装 moment 和 data-io/moment

Material-ui/pickers 完全依赖于 data-io。如果您想使用 material-ui 选择器，则必须安装它。您可以在 material-ui-pickers GitHub 中进一步阅读