Material-ui-pickers: DatePicker not working

[Balochfahad]

I am using material ui react and using a picker but in it datepicker is not working facing following issue..

material-ui-pickers.esm.js:1375 Uncaught TypeError: _this.props.utils.getStartOfMonth is not a function
at new Calendar (material-ui-pickers.esm.js:1375)
at constructClassInstance (react-dom.development.js:12484)
at updateClassComponent (react-dom.development.js:14255)
at beginWork (react-dom.development.js:15082)
at performUnitOfWork (react-dom.development.js:17820)
at workLoop (react-dom.development.js:17860)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)
at replayUnitOfWork (react-dom.development.js:17107)
at renderRoot (react-dom.development.js:17979)
at performWorkOnRoot (react-dom.development.js:18837)
at performWork (react-dom.development.js:18749)
at performSyncWork (react-dom.development.js:18723)
at interactiveUpdates$1 (react-dom.development.js:18992)
at interactiveUpdates (react-dom.development.js:2169)
at dispatchInteractiveEvent (react-dom.development.js:4876)
Calendar @ material-ui-pickers.esm.js:1375
constructClassInstance @ react-dom.development.js:12484
updateClassComponent @ react-dom.development.js:14255
beginWork @ react-dom.development.js:15082
performUnitOfWork @ react-dom.development.js:17820
workLoop @ react-dom.development.js:17860
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:17107
renderRoot @ react-dom.development.js:17979
performWorkOnRoot @ react-dom.development.js:18837
performWork @ react-dom.development.js:18749
performSyncWork @ react-dom.development.js:18723
interactiveUpdates$1 @ react-dom.development.js:18992
interactiveUpdates @ react-dom.development.js:2169
dispatchInteractiveEvent @ react-dom.development.js:4876
index.js:2177 The above error occurred in the component:
in Calendar (created by Context.Consumer)
in WithUtils(Calendar) (created by WithStyles(WithUtils(Calendar)))
in WithStyles(WithUtils(Calendar)) (created by DatePicker)
in DatePicker (created by Context.Consumer)
in WithUtils(DatePicker) (created by BasePicker)
in div (created by DialogContent)
in DialogContent (created by WithStyles(DialogContent))
in WithStyles(DialogContent) (created by ModalDialog)
in div (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by Dialog)
in div (created by Dialog)
in Transition (created by Fade)
in Fade (created by WithTheme(Fade))
in WithTheme(Fade) (created by Dialog)
in RootRef (created by Modal)
in div (created by Modal)
in Portal (created by Modal)
in Modal (created by WithStyles(Modal))
in WithStyles(Modal) (created by Dialog)
in Dialog (created by WithStyles(Dialog))
in WithStyles(Dialog) (created by ModalDialog)
in ModalDialog (created by WithStyles(ModalDialog))
in WithStyles(ModalDialog) (created by ModalWrapper)
in ModalWrapper (created by BasePicker)
in BasePicker (created by Context.Consumer)
in WithUtils(BasePicker) (created by DatePickerModal)
in DatePickerModal (created by ForwardRef)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (at Statements.js:73)
in MuiPickersUtilsProvider (at Statements.js:72)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (at Statements.js:70)
in div (created by Grid)
in Grid (created by WithStyles(Grid))
in WithStyles(Grid) (at Statements.js:46)
in div (at Statements.js:45)
in Statements (created by WithStyles(Statements))
in WithStyles(Statements) (at Routes.js:53)
in main (at Layout.js:17)
in div (at Layout.js:15)
in Layout (created by Route)
in Route (created by withRouter(Layout))
in withRouter(Layout) (created by WithStyles(withRouter(Layout)))
in WithStyles(withRouter(Layout)) (at Routes.js:52)
in component (at ProtectedRoute.js:13)
in Route (at ProtectedRoute.js:11)
in ProtectedRoute (at Routes.js:49)
in div (at Routes.js:23)
in Switch (at Routes.js:22)
in Routes (created by Route)
in Route (created by withRouter(Routes))
in withRouter(Routes) (at App.js:9)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:8)
in App (at src/index.js:7)

[dmtrKovalenko]

Duplicate of #864

[reemyrail]

You can resolve this problem following these steps:
after importing your dependency utils
import MomentUtils from '@date-io/moment';
Add these lines before bootstrapping your app :
MomentUtils.prototype.getStartOfMonth=MomentUtils.prototype.startOfMonth

[jayantbh]

@rima-smart are you sure the assignment is correct?
I had to do this:

MomentUtils.prototype.startOfMonth=MomentUtils.prototype.getStartOfMonth;

[PeshalaLiyanage]

use "@date-io/moment" instead of using "@date-io/date-fns"

import MomentUtils from '@date-io/moment';
<MuiPickersUtilsProvider utils={MomentUtils}>

This fixed the issue for me