Material-ui-pickers: Datetime Picker Ignores provided time completely if Format parameter is provided.

[asadabdulhameed]

The default format of Datetimepicker shows value as "August 24th 15:56" on the input. I want to format the data using format "yyyy/MM/dd hh:mm a". However, when any format is provided, the datetime picker simply igores the time part and shows datetime as "2020/08/Mo 12:00 am". I have called momentUtil (default stuff) on the root.

The problem is no matter what Time value is set or provided, it always shows 12:00 am on the screen. The value in the state is updated correctly but on the screen (Input of the Datetimepicker) it always shows only 12:00 am as the time.

Using exactly the same code as mentioned in the docs (I tried many scenarios as well).

Package.json
{ "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@date-io/moment": "1.x", "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.56", "@material-ui/pickers": "^3.2.10", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "formik": "^2.1.5", "formik-material-ui": "^3.0.0-alpha.0", "formik-material-ui-lab": "^0.0.5", "formik-material-ui-pickers": "^0.0.11", "moment": "^2.27.0", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.3", "yup": "^0.29.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

[evaneaston]

I'm seeing the same thing.

"dependencies": {
    "@apollo/client": "^3.1.3",
    "@date-io/moment": "^1.3.13",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/pickers": "^3.2.10",
    "@rehooks/component-size": "^1.0.3",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^10.4.9",
    "@testing-library/user-event": "^12.1.2",
    "@types/jest": "^26.0.10",
    "@types/node": "^14.6.0",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
    "@welldone-software/why-did-you-render": "^4.3.1",
    "apollo-boost": "^0.4.9",
    "cross-env": "^7.0.2",
    "graphql": "^15.3.0",
    "jsontokens": "^3.0.0",
    "moment": "^2.27.0",
    "query-string": "^6.13.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.3",
    "react-test-renderer": "^16.13.1",
    "recharts": "^1.8.5",
    "typeface-roboto": "0.0.75",
    "typescript": "^4.0.2"
  },

[sga-harshita]

Getting same issue just that the date part is updating on screen and time part is not.
I and using MomentUtils

[eglavin]

Whats the value in your format strings?
yyyy/MM/dd hh:mm a - would be invalid for moment js.
YYYY/MM/DD hh:mm a - would work.
Check the Moment.js website for the right string types.

On that though Moment is an old out of date library which isnt worked on any more.
You guys might be better of moving to a newer library like date-fns which has new js features like tree shaking.
Re: Momenjs Project Status
You-Dont-Need-Momentjs
(Speaking on this after spening the day removing it from the project i'm currently working on).

[oliviertassinari]

The issue has been closed because it does not conform to our issue requirements.
Please provide a minimal reproduction test case with pickers v4 and core v5. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!