Month and Year picker in Material UI React

Question

Is there any way to implement a month Picker and year picker using Material UI. In month view the output should be like only month and the year only Eg:- 2020-09

Answer 1

Material UI V5

Material UI v5 added the DatePicker to @mui/lab so you don't need to install the third-party package anymore. To restrict to month and year only, you can set the view prop like this:

<DatePicker
  views={['year', 'month']}
  label="Year and Month"
  minDate={new Date('2012-03-01')}
  maxDate={new Date('2023-06-01')}
  value={value}
  onChange={setValue}
  renderInput={(params) => <TextField {...params} helperText={null} />}
/>

output should be like only month and the year only Eg:- 2020-09

To change how the TextField display the current date, use inputFormat prop. If you're using date-fns, see this table here for reference.

<DatePicker inputFormat="yyyy-MM"

Material UI V4

You can use different views as demonstrated in this section here.

<DatePicker
  variant="inline"
  openTo="year"
  views={["year", "month"]}
  label="Year and Month"
  helperText="Start from year selection"
  value={selectedDate}
  onChange={handleDateChange}
/>

Live Demo

Answer 2

In your component, pass an array called views with month and year.

views={["year", "month"]}

Take a look at views prop for more info: https://material-ui-pickers.dev/api/KeyboardDatePicker

Also change the format to MM/yyyy

format="MM/yyyy"

Here is a sandbox for your reference:

Answer 3

import "date-fns";
import React from "react";
import Grid from "@material-ui/core/Grid";
import DateFnsUtils from "@date-io/date-fns";
import { MuiPickersUtilsProvider, DatePicker } from "@material-ui/pickers";

export default function MaterialUIPickers() {
  // The first commit of Material-UI
  const [selectedDate, setSelectedDate] = React.useState<Date | null>(
    new Date("2014-08-18T21:11:54")
  );

  const handleDateChange = (date: Date | null) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
<DatePicker
  variant="inline"
  openTo="year"
  views={["year", "month"]}
  label="Year and Month"
  helperText="Start from year selection"
  value={selectedDate}
  onChange={handleDateChange}
/>
      </Grid>
    </MuiPickersUtilsProvider>
  );
}

Second Solution

import "date-fns";
import React from "react";
import Grid from "@material-ui/core/Grid";
import DateFnsUtils from "@date-io/date-fns";
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker
} from "@material-ui/pickers";

export default function MaterialUIPickers() {
  const [selectedDate, setSelectedDate] = React.useState(
    new Date("2014-08-18T21:11:54")
  );

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

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Grid container justify="space-around">
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/yyyy"
          views={["year", "month"]}
          margin="normal"
          id="date-picker-inline"
          label="Date picker inline"
          value={selectedDate}
          onChange={handleDateChange}
          KeyboardButtonProps={{
            "aria-label": "change date"
          }}
        />
      </Grid>
    </MuiPickersUtilsProvider>
  );
}