Month and Year picker in MaterialUI ReactJS

5
votes

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

2
reactjsdatedatetimematerial-ui
Have you tried material-ui.com/components/pickers ? – ankitbeniwal
Yeah i tried, in there we can get the whole date only. what i want is to render only the month and year (not the date of month)list and retrive the month and year. Is there any way – Sindujan Nirmalan

2 Answers

3
votes

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

Edit 64112889/month-and-year-picker-in-materialui-react-js

2
votes

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:

month-and-year-picker-in-materialui-react-js-by-ankit-beniwal