Material-ui: [DatePicker] Codesandbox link not working

[ronaksonigara]

https://codesandbox.io/s/8gpxl

[eps1lon]

Probably due to using latest versions of date-fns. Which is not supported by /pickers v3.

[ronaksonigara]

Tried using different versions but it still not working. Kindly help me with the version.

[gespispace]

@ronaksonigara I changed version @date-io/date-fns on 1.3.13 and it is work.

https://codesandbox.io/s/material-demo-nzfim

[ronaksonigara]

Thanks it's working

[oliviertassinari]

I believe the root issue was solved in the work-in-progress v4 of the pickers component by moving @date-io as an internal dependency. cc @dmtrKovalenko for confirmation. I'm not sure what can do about it in the meantime 🤔

[dmtrKovalenko]

https://codesandbox.io/s/material-demo-bqjuv
Working version. @date-io/date-fns should be locked to v1.x

[oliviertassinari]

So we can either (1.) start the upgrade to v4-alpha or (2.) lock the version in
https://github.com/mui-org/material-ui/blob/8d0a7e19446849b8d5992b27ee3ee48b76005596/docs/src/modules/utils/helpers.js#L98-L110
?

[dmtrKovalenko]

I think we should not propagate alpha version, because we are still planning breaking changes.
Lets wait to the first beta

[simkessy]

I'm having an issue with date pickers at the moment where it's showing me 1 day behind the selected date.

The displayed date in Material UI Pickers is 1 day behind the selected date:

I selected 25th, the value in formik is 25th but the value displayed on the form is 24th.

  "@date-io/date-fns": "^1.3.13",
  "date-fns": "^2.9.0",

import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers';
import { format, addDays } from 'date-fns';

<MuiPickersUtilsProvider utils={DateFnsUtils}>
    <FastField
       as={DatePicker}
       variant="inline"
       disableToolbar
       name="startTime"
       format="PPP"
       onChange={date => {
         console.log(format(date, 'yyyy-MM-dd'));
         setFieldValue('startTime', format(date, 'yyyy-MM-dd'));
       }}
       value={values.startTime}
   />
</MuiPickersUtilsProvider>

Could it be a dependency versioning issue?

[dmtrKovalenko]

@simkessy, no it is definitely not version issue

[simkessy]

Any idea what the issue could be here?

[oliviertassinari]

Per the codesandbox description:

https://github.com/mui-org/material-ui/blob/master/docs/src/pages/components/pickers/MaterialUIPickers.js

I believe this issue should be moved to the main repository and appears to be a duplicate of #19438.

[oliviertassinari]

@ronaksonigara What do you think of this temporary patch? Do you want to submit a pull request? :)

diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js
index 3090d9dc2..30d3b17f4 100644
--- a/docs/src/modules/utils/helpers.js
+++ b/docs/src/modules/utils/helpers.js
@@ -104,9 +104,7 @@ function getDependencies(raw, options = {}) {
     '@material-ui/styles': 'latest',
     '@material-ui/system': 'latest',
     '@material-ui/utils': 'latest',
-    'date-fns': 'next',
-    jss: 'next',
-    'jss-plugin-template': 'next',
+    '@date-io/date-fns': 'v1',
   };

   const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm;

[ronaksonigara]

@oliviertassinari Thank you for all the help. This temporary patch works.