13

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 7

36

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
  • 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
5

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
// ]
3

sometimes it just needs this :

yarn add @mui/lab
1
  • 1
    In spite of it being so simple, this was the right answer for me :) thanks! Jan 1 at 21:11
1

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
0

install both npm i @mui/lab and npm i @mui/material

0

To fix this issue use below commend. It's worked for me.

npm install @mui/x-date-pickers
-1

If after installing @mui/lab it doesn't work, You can add:

npm i @mui/material

Or

yarn add @mui/material
1
  • 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 Bot
    Dec 9, 2021 at 8:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.