Search code examples
reactjsdatepickercalendarmaterial-ui

Can we use Calender component in the material UI picker as a standalone component without using the Datepicker - if so How?

I am trying to develop a datepicker with select day month and year as list of values,however want to use calendar functionality (with dates selection and icon) as well , so that the user can either use list of values from select tag (dd - mm-yyyy) or the calender to select the date.

How to use Calendar as a standalone one without usign KeyBoardDatePicker etc.

I have imported Calender from here:

import { Calendar } from '@material-ui/pickers/views/Calendar/Calendar';

Using it as below: 

 <MuiPickersUtilsProvider utils={DateFnsUtils}>
    <Calendar date={date}  {...props} />
  </MuiPickersUtilsProvider>

The util context is not getting passed correctly to the Calendar component - Am i missing something obvious here?

Solution

  • Yes, your problem is actually coming from imports.

    Imports like

    import { Calendar } from '@material-ui/pickers'

    Are totally different from 

    import { Calendar } from '@material-ui/pickers/views/Calendar/Calendar';

    You need to import Calendar the same way as you are importing MuiPickersUtilsProvider. Then utils will be accessible and you can use the calendar. Here is official documentation: https://material-ui-pickers.dev/guides/static-components