MUI React 中的月份和年份选择器答案

【问题标题】：Month and Year picker in MUI ReactMUI React 中的月份和年份选择器
【发布时间】：2021-01-14 16:02:22
【问题描述】：

有没有办法使用 MUI 实现月份选择器和年份选择器。在月视图中，输出应该只有月份和年份例如：- 2020-09

【问题讨论】：

你试过material-ui.com/components/pickers吗？
是的，我试过了，在那里我们只能得到整个日期。我想要的是只呈现月份和年份（不是月份的日期）列表并检索月份和年份。有什么办法

【解决方案1】：

MUI v5 将DatePicker 添加到@mui/lab，因此您不再需要安装第三方包。要仅限于月份和年份，您可以像这样设置view prop：

<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} />}
/>

输出应该只有月份和年份例如：- 2020-09

要更改 TextField 显示当前日期的方式，请使用 inputFormat 属性。如果您使用的是 date-fns，请参阅此处的 this 表以供参考。

<DatePicker inputFormat="yyyy-MM"

您可以使用本节here 中演示的不同视图。

<DatePicker
  variant="inline"
  openTo="year"
  views={["year", "month"]}
  label="Year and Month"
  helperText="Start from year selection"
  value={selectedDate}
  onChange={handleDateChange}
/>

现场演示

【讨论】：

【解决方案2】：

在您的组件中，使用month 和year 传递一个名为views 的数组。

views={["year", "month"]}

查看views 道具了解更多信息：https://material-ui-pickers.dev/api/KeyboardDatePicker

还将format 更改为MM/yyyy

format="MM/yyyy"

这是一个沙盒供您参考：

【讨论】：