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

对于 MUI 的 datepicker，如果想要只选择年份，可以使用 `mui-datefield` 组件，并设置 `type="year"`。具体代码如下：

<mui-datefield type="year" label="选择年份" value="2020"></mui-datefield>

其中，`value` 属性用于初始化赋值，将其设置为你想要的年份即可。如上代码将默认选中 2020 年。

需要注意的是，`mui-datefield` 组件需要在 MUI 的 JS 文件加载后才能正常使用。

相关问题

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`。

mui-datepicker

mui-datepicker是一个基于MUI框架的日期选择器插件。用户可以使用该插件选择日期和时间。根据引用和引用提供的代码片段，可以看出，通过调用mui.toast方法，可以在页面上显示选择的日期和时间。同时，根据引用提供的代码片段，可以猜测在id为"pickDateBtn"的元素上添加了一个点击事件监听器，用于触发日期选择功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [MUI - datepicker（时间选择器）](https://blog.csdn.net/weixin_31115195/article/details/117893210)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]