I was using the Material UI Timepicker
but after updating to Material UI 5 it is not working anymore. I updated everything to @next
and @material-ui/core
(version 5.0.0-beta.5) and @material-ui/lab
(version: 5.0.0-alpha.44).
7 Answers
If you copy the Timepicker
code from the MUI docs, you also need to install the lab package which contains the adapter code to integrate with date-fns
. See the requirements here. For reference, you can see the package.json file from the live demo.
npm i @mui/lab
-
1@diabetico if you're updating to MUI v5, you should change the name from
@material-ui/core
to@mui/material
. See the installation guide. Oct 5, 2021 at 23:43
As of Oct 2022, to fix this issue, use
npm i @mui/x-date-pickers
Read further more on dependencies requirement It supports 4 different date-libraries as of now. It is not mandatory to install all of them, choose as per project requirement
date-fns
Day.js
Luxon
Moment.js
Elaborating on date-fns is like manipulating the results of MUI date-picker in required format
import { format, compareAsc } from 'date-fns'
format(new Date(2014, 1, 11), 'MM/dd/yyyy')
//=> '02/11/2014'
const dates = [
new Date(1995, 6, 2),
new Date(1987, 1, 11),
new Date(1989, 6, 10),
]
dates.sort(compareAsc)
//=> [
// Wed Feb 11 1987 00:00:00,
// Mon Jul 10 1989 00:00:00,
// Sun Jul 02 1995 00:00:00
// ]
sometimes it just needs this :
yarn add @mui/lab
-
1In spite of it being so simple, this was the right answer for me :) thanks! Jan 1 at 21:11
I had the same issue. What I did was installing date-fns as well
npm i date-fns
I then stopped the localhost server and restart it again with npm start (I was using react)
npm start
To fix this issue use below commend. It's worked for me.
npm install @mui/x-date-pickers
If after installing @mui/lab
it doesn't work, You can add:
npm i @mui/material
Or
yarn add @mui/material
-
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.– Community BotDec 9, 2021 at 8:27