TypeError：utils.endOfDay 不是函数

Posted 2023-02-22

【中文标题】TypeError：utils.endOfDay 不是函数

【英文标题】：TypeError: utils.endOfDay is not a function

【发布时间】：2019-12-28 11:55:19

【问题描述】：

我是 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;

但显示错误

TypeError: 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) 

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

【问题讨论】：

使用'moment'的导入时刻；请同时添加 package.json 文件。看起来像是安装问题而不是代码问题。

【参考方案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

【讨论】：

但是已经安装了 moment "moment": "^2.24.0"，MomentUtils 不在这里面吗？

请参考你的文档链接，那里提到了导入，MomentUtils

@ajeeshs - 我在时刻文档中找不到 MomentUtils。即使存在，它也不具备material-ui-pickers依赖的一些功能（比如endOfDay）。 data-io 提供了 material-ui-pickers 需要的所有功能。

是的 :) 我错过了 dat

【参考方案2】：

我在日期选择器文档中遇到了同样的问题 https://material-ui-pickers.dev/getting-started/installation

安装你的版本 npm i @date-io/moment@1.x moment