Question

我从文档here中使用我的项目中的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;

但显示错误

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) {

先谢谢了。帮我解决这个问题

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

Answer 2

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

安装版本npm i @ date-io / moment @ 1.x时刻

TypeError：utils.endOfDay不是一个函数

2 个答案: