Material ui DatePicker enable only year

Question

Is there any way to show only years in Material UI DatePicker with react? I want to allow the user to be able to select only the year and not months or days. Note: The option openToYearSelection does not achieve this neither does autoOk help.

Answer 1

I came across the same issue and the way i have sorted it out is by using material-ui-pickers library Here is an example:

import React, { Fragment, useState } from "react";
import { DatePicker, InlineDatePicker } from "material-ui-pickers";

function YearMonthPicker(props) {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <Fragment>
      <div className="picker">
        <DatePicker
          views={["year"]}
          label="Year only"
          value={selectedDate}
          onChange={handleDateChange}
          animateYearScrolling
        />
      </div>
    </Fragment>
  );
}

export default YearMonthPicker;