react mui datepicker 只选择年份 及初始化赋值

对于 React 和 MUI 的 datepicker，也可以使用 `MuiPickersUtilsProvider` 和 `DatePicker` 组件来实现只选择年份的效果。具体代码如下：

import React, { useState } from 'react';
import { MuiPickersUtilsProvider, DatePicker } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';

function YearDatePicker() {
  const [selectedDate, setSelectedDate] = useState(new Date('2021-01-01'));

  const handleDateChange = (date) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <DatePicker
        views={['year']}
        label="选择年份"
        value={selectedDate}
        onChange={handleDateChange}
      />
    </MuiPickersUtilsProvider>
  );
}

其中，`views` 属性设置为 `['year']` 表示只显示年份，`value` 属性用于初始化赋值，将其设置为一个 `Date` 对象即可。如上代码将默认选中 2021 年。

需要注意的是，需要在组件中引入 `@material-ui/pickers` 和 `@date-io/date-fns` 两个库，并在 `MuiPickersUtilsProvider` 组件中传入 `DateFnsUtils`。