类型错误：utils.endOfDay 不是函数

Question

我是 React 新手，在我的项目中使用 material-ui 日期选择器，来自此处的文档。在这我使用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 不是函数 getComparisonMaxDate 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 只是其中之一。数据io GitHub
• 您必须同时安装 moment 和 data-io/moment
• Material-ui/pickers 完全依赖于 data-io。如果您想使用 material-ui 选择器，则必须安装它。您可以在material-ui-pickers GitHub 中进一步阅读