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

Question

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?

Answer 1

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

Answer 2

It works

import React, { useState } from "react";
import { Paper } from "@material-ui/core";
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, Calendar } from "@material-ui/pickers";
import idLocale from "date-fns/locale/id";
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: { light: green[300], main: green[500], dark: green[700] },
  },
});

function MyCalendar() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiThemeProvider theme={theme}>
      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={idLocale}>

        <Paper style={{ overflow: "hidden" }}>
          <Calendar
            date={selectedDate}
            onChange={handleDateChange}
          />
        </Paper>
      </MuiPickersUtilsProvider>
    </MuiThemeProvider>
  );
}

export default MyCalendar;