Datepicker calls unexisting function `utils.getYearText` when using moment? #1471

paul23-git · 2020-01-26T10:53:53Z

Environment

Tech	Version
@material-ui/pickers	3.2.9
material-ui	4.9.0
React	16.12
Browser	chrome
Peer library	@date-io/moment: 2.0.1 ; moment: 2.24.0

Steps to reproduce

Just added a simple component containing (can't get more basic than this, I'm even providing a static date just to show the error):

import * as React from 'react';
import DateUtils from "@date-io/moment";
import {MuiPickersUtilsProvider, DatePicker} from "@material-ui/pickers";

function App(props) {
    return (<div>
        <MuiPickersUtilsProvider utils={DateUtils}>
            <DatePicker
                label="Basic example"
                value={new Date()}
                animateYearScrolling
            />
        </MuiPickersUtilsProvider>
    </div>);
}

Expected behavior

Well I expect it to work

Actual behavior

The following (long) error chain (though initial error is probably the best):

Uncaught TypeError: utils.getYearText is not a function
  DatePickerToolbar	
  renderWithHooks	
  mountIndeterminateComponent	
  beginWork$1	
  callCallback	
  invokeGuardedCallbackDev	
  invokeGuardedCallback	
  beginWork$$1	
  performUnitOfWork	
  workLoopSync	
  performSyncWorkOnRoot	
  (anonymous function)	
  unstable_runWithPriority	
  runWithPriority$2	
  flushSyncCallbackQueueImpl	
  flushSyncCallbackQueue	
  discreteUpdates$1	
  discreteUpdates	
  dispatchDiscreteEvent	

Uncaught TypeError: utils.getDayText is not a function
  (anonymous function)	
  Calendar._this.renderDays	
  (anonymous function)	
  Calendar._this.renderWeeks	
  render	
  finishClassComponent	
  updateClassComponent	
  beginWork$1	
  callCallback	
  invokeGuardedCallbackDev	
  invokeGuardedCallback	
  beginWork$$1	
  performUnitOfWork	
  workLoopSync	
  performSyncWorkOnRoot	
  (anonymous function)	
  unstable_runWithPriority	
  runWithPriority$2	
  flushSyncCallbackQueueImpl	
  flushSyncCallbackQueue	
  discreteUpdates$1	
  discreteUpdates	
  dispatchDiscreteEvent	

The above error occurred in the <DatePickerToolbar> component:
    in DatePickerToolbar (created by Picker)
    in div (created by Picker)
    in Picker (created by PickerWithState)
    in div (created by ForwardRef(DialogContent))
    in ForwardRef(DialogContent) (created by WithStyles(ForwardRef(DialogContent)))
    in WithStyles(ForwardRef(DialogContent)) (created by ModalDialog)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Dialog))
    in div (created by Transition)
    in Transition (created by ForwardRef(Fade))
    in ForwardRef(Fade) (created by TrapFocus)
    in TrapFocus (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef(Dialog))
    in ForwardRef(Dialog) (created by WithStyles(ForwardRef(Dialog)))
    in WithStyles(ForwardRef(Dialog)) (created by ModalDialog)
    in ModalDialog (created by WithStyles(ModalDialog))
    in WithStyles(ModalDialog) (created by ModalWrapper)
    in ModalWrapper (created by Wrapper)
    in Wrapper (created by PickerWithState)
    in PickerWithState (at App.js:63)
    in MuiPickersUtilsProvider (at App.js:62)
    in div (at App.js:61)
    in App (at src/index.js:11)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
  console.<computed>	
  logCapturedError	
  logError	
  update.callback	
  callCallback	
  commitUpdateEffects	
  commitUpdateQueue	
  commitLifeCycles	
  commitLayoutEffects	
  callCallback	
  invokeGuardedCallbackDev	
  invokeGuardedCallback	
  commitRootImpl	
  unstable_runWithPriority	
  runWithPriority$2	
  commitRoot	
  finishSyncRender	
  performSyncWorkOnRoot	
  (anonymous function)	
  unstable_runWithPriority	
  runWithPriority$2	
  flushSyncCallbackQueueImpl	
  flushSyncCallbackQueue	
  discreteUpdates$1	
  discreteUpdates	
  dispatchDiscreteEvent	

The above error occurred in the <Calendar> component:
    in Calendar (created by WithUtils(Calendar))
    in WithUtils(Calendar) (created by WithStyles(WithUtils(Calendar)))
    in WithStyles(WithUtils(Calendar)) (created by Picker)
    in div (created by Picker)
    in div (created by Picker)
    in Picker (created by PickerWithState)
    in div (created by ForwardRef(DialogContent))
    in ForwardRef(DialogContent) (created by WithStyles(ForwardRef(DialogContent)))
    in WithStyles(ForwardRef(DialogContent)) (created by ModalDialog)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Dialog))
    in div (created by Transition)
    in Transition (created by ForwardRef(Fade))
    in ForwardRef(Fade) (created by TrapFocus)
    in TrapFocus (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef(Dialog))
    in ForwardRef(Dialog) (created by WithStyles(ForwardRef(Dialog)))
    in WithStyles(ForwardRef(Dialog)) (created by ModalDialog)
    in ModalDialog (created by WithStyles(ModalDialog))
    in WithStyles(ModalDialog) (created by ModalWrapper)
    in ModalWrapper (created by Wrapper)
    in Wrapper (created by PickerWithState)
    in PickerWithState (at App.js:63)
    in MuiPickersUtilsProvider (at App.js:62)
    in div (at App.js:61)
    in App (at src/index.js:11)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
  console.<computed>	
  logCapturedError	
  logError	
  update.callback	
  callCallback	
  commitUpdateEffects	
  commitUpdateQueue	
  commitLifeCycles	
  commitLayoutEffects	
  callCallback	
  invokeGuardedCallbackDev	
  invokeGuardedCallback	
  commitRootImpl	
  unstable_runWithPriority	
  runWithPriority$2	
  commitRoot	
  finishSyncRender	
  performSyncWorkOnRoot	
  (anonymous function)	
  unstable_runWithPriority	
  runWithPriority$2	
  flushSyncCallbackQueueImpl	
  flushSyncCallbackQueue	
  discreteUpdates$1	
  discreteUpdates	
  dispatchDiscreteEvent	

Uncaught TypeError: utils.getYearText is not a function
  DatePickerToolbar	
  renderWithHooks	
  mountIndeterminateComponent	
  beginWork$1	
  callCallback	
  invokeGuardedCallbackDev	
  invokeGuardedCallback	
  beginWork$$1	
  performUnitOfWork	
  workLoopSync	
  performSyncWorkOnRoot	
  (anonymous function)	
  unstable_runWithPriority	
  runWithPriority$2	
  flushSyncCallbackQueueImpl	
  flushSyncCallbackQueue	
  discreteUpdates$1	
  discreteUpdates	
  dispatchDiscreteEvent

Live example

(notice that the error is truncated here).
https://codesandbox.io/s/relaxed-bouman-qu188

The text was updated successfully, but these errors were encountered:

dmtrKovalenko · 2020-01-26T11:00:06Z

Use date-io v1.x.
This was mentioned everywhere

GavinThompson · 2020-02-27T18:55:54Z

@dmtrKovalenko Just a heads up, the readme/installation instructions on github for this project does not reference v1.x

dmtrKovalenko · 2020-02-27T19:33:52Z

@GavinThompson thanks, all the time forgetting about readme.

yanickrochon · 2020-05-26T17:07:05Z

Will this be fixed at some point? This is seriously annoying every time I update my dependencies. It's like "WTF? What now?" Then I waste an hour tracking back to this issue.

dmtrKovalenko · 2020-05-26T17:08:52Z

@yanickrochon This already fixed in v4. Update to v4 to use date-io v2. Or use v3 stable of pickers, but do not update date-io.

Thats it.

yanickrochon · 2020-05-26T17:42:56Z

@dmtrKovalenko fair enough. thanks.

Jesusz0r · 2020-06-01T18:15:02Z

I have

    "@date-io/moment": "1.3.13",
    "@material-ui/pickers": "3.2.10",
    "moment": "2.26.0",

and still fails

oliviertassinari · 2020-06-01T19:11:22Z

@Jesusz0r Can you reproduce it with @material-ui/[email protected]? A live reproduction on codesandbox would be perfect.

Gautam-nagpal · 2020-06-07T20:46:48Z

Use
"@date-io/moment": "^1.3.9",
"@material-ui/pickers": "3.2.10",
"moment": "2.26.0",
restart the server and it will work fine

2degreesbroadband · 2020-06-07T23:57:20Z

Use
"@date-io/moment": "^1.3.9",
"@material-ui/pickers": "3.2.10",
"moment": "2.26.0",
restart the server and it will work fine

Thanks! This worked for me :)

marcelovicentegc · 2021-02-02T14:49:39Z

For those who faced this issue while using date-fns, downgrading to "@date-io/date-fns": "^1.3.13" fixes that issue as well.

Libraries:

"@date-io/date-fns": "^1.3.13"
"@material-ui/pickers": "^3.2.10"
"draft-js": "^0.11.7"

ghost · 2021-03-09T15:59:38Z

Use
"@date-io/moment": "^1.3.9",
"@material-ui/pickers": "3.2.10",
"moment": "2.26.0",
restart the server and it will work fine

Thanks!!!!! 💯

simo54 · 2021-06-20T18:57:15Z

Just for documenting purpouse, the following setup worked for me

"@date-io/moment": "1.3.9",
"moment": "^2.29.1",
"@material-ui/pickers": "^3.3.10",

stefanpl · 2021-07-29T10:29:40Z

So the fix here is to use outdated versions of the involved libs? 🤔

How is this closed?

vhmoura · 2023-09-13T09:59:26Z

I am using:
"@date-io/moment": "^2.17.0",
"@material-ui/pickers": "^3.3.11",
"moment": "^2.29.4",

Still having issues. I can't downgrade unfortunately. How and when this be resolved?

LukasTy · 2023-09-13T10:03:38Z

Still having issues. I can't downgrade unfortunately. How and when this be resolved?

Sorry, but the mentioned library is no longer maintained for quite some time.
You can find more information here: #2157
Feel free to upgrade to using @mui/x-date-pickers to receive the latest updates and features. 😉

mahisaajy · 2024-02-21T06:43:41Z

Use "@date-io/moment": "^1.3.9", "@material-ui/pickers": "3.2.10", "moment": "2.26.0", restart the server and it will work fine

for material ui 4.
choose moment 2.26.0 version , it works.

dmtrKovalenko closed this as completed Jan 26, 2020

oliviertassinari added the support Ask on StackOverflow label Jun 7, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datepicker calls unexisting function `utils.getYearText` when using moment? #1471

Datepicker calls unexisting function `utils.getYearText` when using moment? #1471

paul23-git commented Jan 26, 2020 •

edited

Loading

dmtrKovalenko commented Jan 26, 2020

GavinThompson commented Feb 27, 2020

dmtrKovalenko commented Feb 27, 2020

yanickrochon commented May 26, 2020

dmtrKovalenko commented May 26, 2020

yanickrochon commented May 26, 2020

Jesusz0r commented Jun 1, 2020

oliviertassinari commented Jun 1, 2020

Gautam-nagpal commented Jun 7, 2020

2degreesbroadband commented Jun 7, 2020

marcelovicentegc commented Feb 2, 2021

ghost commented Mar 9, 2021

simo54 commented Jun 20, 2021

stefanpl commented Jul 29, 2021

vhmoura commented Sep 13, 2023

LukasTy commented Sep 13, 2023 •

edited

Loading

mahisaajy commented Feb 21, 2024 •

edited

Loading

Datepicker calls unexisting function utils.getYearText when using moment? #1471

Datepicker calls unexisting function utils.getYearText when using moment? #1471

Comments

paul23-git commented Jan 26, 2020 • edited Loading

Environment

Steps to reproduce

Expected behavior

Actual behavior

Live example

dmtrKovalenko commented Jan 26, 2020

GavinThompson commented Feb 27, 2020

dmtrKovalenko commented Feb 27, 2020

yanickrochon commented May 26, 2020

dmtrKovalenko commented May 26, 2020

yanickrochon commented May 26, 2020

Jesusz0r commented Jun 1, 2020

oliviertassinari commented Jun 1, 2020

Gautam-nagpal commented Jun 7, 2020

2degreesbroadband commented Jun 7, 2020

marcelovicentegc commented Feb 2, 2021

ghost commented Mar 9, 2021

simo54 commented Jun 20, 2021

stefanpl commented Jul 29, 2021

vhmoura commented Sep 13, 2023

LukasTy commented Sep 13, 2023 • edited Loading

mahisaajy commented Feb 21, 2024 • edited Loading

Datepicker calls unexisting function `utils.getYearText` when using moment? #1471

Datepicker calls unexisting function `utils.getYearText` when using moment? #1471

paul23-git commented Jan 26, 2020 •

edited

Loading

LukasTy commented Sep 13, 2023 •

edited

Loading

mahisaajy commented Feb 21, 2024 •

edited

Loading