Material-ui-pickers: Doc Site Getting Started WRONG

[kyledgreen]

The Getting Started Installation and Usage sections indicated to:
import MuiPickersUtilsProvider from 'material-ui-pickers/MuiPickersUtilsProvider';

When it needs to be:
import { MuiPickersUtilsProvider } from 'material-ui-pickers';

Otherwise, you get:

Error: Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports. Recommendation: use named imports from the module index.

[dmtrKovalenko]

😱😱😱 That’s awful

[sebastianvoss]

I'm still getting this error even with import { MuiPickersUtilsProvider } from 'material-ui-pickers'. See https://codesandbox.io/s/qko2xqv93q.

[danimbrogno-pml]

@sebastianvoss For some reason the problem disappeared for me when I changed:

import { MuiPickersUtilsProvider } from 'material-ui-pickers';

to

import MuiPickersUtilsProvider from 'material-ui-pickers/MuiPickersUtilsProvider';

[TrySound]

@danimbrogno-pml You should use only named exports or path imports, but not both together.

import { DatePicker, MuiPickersUtilsProvider } from 'material-ui-pickers';

or

import { DatePicker } from 'material-ui-pickers/DatePicker';
import MuiPickersUtilsProvider from 'material-ui-pickers/MuiPickersUtilsProvider';

[TrySound]

I recommend named exports because bundles have more optimizations.

[stefensuhat]

docs write

import { DatePicker } from 'material-ui-pickers';

it should be

import DatePicker from 'material-ui-pickers/DatePicker';

[itoed]

Can anybody tell what the problem is with the example from @sebastianvoss here: https://codesandbox.io/s/qko2xqv93q?

[TrySound]

@stefensuhat Not necessary. import { DatePicker } from 'material-ui-pickers'; is recommended way.

[TrySound]

@itoed Same problem as everywhere above. Import from only one place.
https://codesandbox.io/s/q36ql75q3j

[itoed]

Ahh, I get it now from your exampe. Thank you @TrySound!

[barbalex]

@TrySound yeah, you are right but what you say does not work for DateFnsUtils or, in my case, MomentUtils. Which is rather unintuitive and sent me on a debugging adventure.

Anyway: Thanks for this great tool.

[barbalex]

Also: The docs are not consistent on importing utils:

• according to the readme it is import MomentUtils from 'material-ui-pickers/moment-utils'. Which errors in my case
• according to the documentation website it is import MomentUtils from 'material-ui-pickers/utils/moment-utils'

[TrySound]

Bad merge. Never mind. These utils will be provided as separate packages soon
https://github.com/dmtrKovalenko/date-io

[kamarajuPrathi]

Should we have to install date-io instead of individual utils , how to resolve the issue
Error: Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports. Recommendation: use named imports from the module index.

[dmtrKovalenko]

@kamarajuPrathi not yet. Now you must check the path imports consistency through your app

[kamarajuPrathi]

@dmtrKovalenko how should fix the above issue <MuiPickersUtilsProvider utils={DateFnsUtils}><InlineDatePicker key={index} label={ label } value={ value } clearable onChange={ (e) => onChange(e) } /></MuiPickersUtilsProvider> do you see anything wrong in this , i get this error Error: Can not find utils in context. You either a) forgot to wrap your component tree in MuiPickersUtilsProvider; or b) mixed named and direct file imports. Recommendation: use named imports from the module index.

[TrySound]

Yes, use named imports from material-ui-pickers entry point. If you still get the error show your imports.

[kamarajuPrathi]

@TrySound @dmtrKovalenko
import { InlineDatePicker } from 'material-ui-pickers'
import DateFnsUtils from "material-ui-pickers/utils/date-fns-utils";
import MuiPickersUtilsProvider from "material-ui-pickers/MuiPickersUtilsProvider";

these are the imports

[TrySound]

Import provider from entry point too. I already attached the example above.

[deeptikanta]

import { InlineDatePicker } from 'material-ui-pickers';

this import giving me error.

[TrySound]

@deeptikanta

import { InlineDatePicker, MuiPickersUtilsProvider } from 'material-ui-pickers'
import DateFnsUtils from "material-ui-pickers/utils/date-fns-utils";

[GarrettJMU]

I'm still seeing this issue:
"material-ui-pickers": "^2.02",
"@date-io/moment": "^0.0.2",

import MomentUtils from "@date-io/moment"
import MuiPickersUtilsProvider from 'material-ui-pickers/MuiPickersUtilsProvider';

      <MuiPickersUtilsProvider utils={MomentUtils} >
          {children}
      </MuiPickersUtilsProvider>

EDIT:
Nevermind, in one of the children components had the issue noted above with TimePicker and DatePIcker.

EDIT EDIT:
It's still broken for me:
import DatePickerInline from 'material-ui-pickers/DatePicker/DatePickerInline'
import TimePicker from 'material-ui-pickers/TimePicker'

[joelvh]

When will the docs website be updated with v2 docs?

[dmtrKovalenko]

@joelvh they are updated

[joelvh]

awesome! Thanks @dmtrKovalenko - that ought to help avoid some confusion :-)

[josoroma]

To me works with:

import { MuiPickersUtilsProvider } from 'material-ui-pickers'
import DayJSUtils from '@date-io/dayjs'

      <MuiThemeProvider theme={theme}>
        <MuiPickersUtilsProvider utils={DayJSUtils}>
         ....
        </MuiPickersUtilsProvider>
      </MuiThemeProvider>

[aihihi]

I had the same issue after installing more time libraries. Read this post and tried some provided ways. Finally, this works for me.

import { DatePicker, MuiPickersUtilsProvider } from 'material-ui-pickers';
import MomentUtils from '@date-io/moment';

<MuiPickersUtilsProvider utils={MomentUtils}> <DatePicker // other props here /> </MuiPickersUtilsProvider>
Also updated the version up to v2.2.4
Hope it can help someone.

[chenop]

For me the issue was that the specific component I tried to use with DatePickerwas not wrapped with MuiPickersUtilsProvider