TypeError: utils.endOfDay is not a function

Question

I am new in react, using material-ui date picker in my project , from the documentation here . In this i am using moment.js

the following code in 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;

but showing error

TypeError: utils.endOfDay is not a function 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) {

Thanks in advance . Help me out of this problem

Answer 1

The import is wrong. It should be:

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

You can refer to working CodeSandbox demo:https://codesandbox.io/s/material-demo-h3ke7?fontsize=14

Clarification:

• date-io provides abstraction over common javascript date management libraries. date-io/moment is just one of them. data-io GitHub
• You must install both moment and data-io/moment
• Material-ui/pickers fully relies on data-io. You must install it if you want to use material-ui pickers. You can further read in material-ui-pickers GitHub

Answer 2

I faced the same issue in date picker documentation https://material-ui-pickers.dev/getting-started/installation

install thie version npm i @date-io/[email protected] moment