Search code examples
reactjsdatedatetimematerial-uimui-x

Month and Year picker in Material UI React

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

Solution

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

    Codesandbox Demo

    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

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