Month and Year picker in MUI React

Question

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

Answer 1

V5

MUI 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"

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