reactjsmaterial-uireact-adminmui-x-date-picker

DateRangePicker in a React-Admin application

I want to use material ui's DateRangePicker in my React-Admin app.

But when i do an npm install @material-ui/pickers, I get:

While resolving: test-admin@0.1.0
Found: react@18.2.0
node_modules/react
  react@"^18.2.0" from the root project

Could not resolve dependency:
peer react@"^16.8.0 || ^17.0.0" from @material-ui/core@4.12.4
node_modules/@material-ui/core
  peer @material-ui/core@"^4.0.0" from @material-ui/pickers@3.3.10
  node_modules/@material-ui/pickers
    @material-ui/pickers@"*" from the root project

Does this indicate I need to downgrade to React 16 or 17?

Is there any way around this where I can use DateRangePicker with an app that uses React 18?

My package.json dependencies include:

  ...
  "dependencies": {
    "@mui/icons-material": "^5.11.0",
    "@mui/material": "^5.11.0",
    ...
    "react": "^18.2.0",
    "react-admin": "^4.8.1",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
  },
  ...
Solution

  • As you can check here in MUI docs. Your installation package name is different from the one you're using. It should be @mui/x-date-pickers. Make sure you have installed/updated peer dependencies before installing pickers. Try these commands:

    1️⃣ Install peer dependencies first:

    npm install @mui/material @emotion/react @emotion/styled

    2️⃣ Now install pickers:

    npm install @mui/x-date-pickers

    👉 Note: You requires to install a Date library as well to use Mui DatePickers. e.g. dayjs, date-fns, etc.