Month and Year picker in MUI React - reactjs

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

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>
);
}