MaterialUI ReactJS 中的月份和年份选择器

Question

有什么方法可以使用材质 UI 实现月份选择器和年份选择器。在月视图中，输出应该只有月和年，例如：- 2020-09

Answer 1

材质UI V5

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

<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要更改当前日期的显示方式，请使用inputFormatprop. 如果您使用 date-fns，请参阅此处的表以供参考。

<DatePicker inputFormat="yyyy-MM"

材质UI V4

您可以使用不同的视图，如本节中所示。

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

现场演示

Answer 2

views在您的组件中，传递一个名为monthand的数组year。

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

查看viewsprop 以获取更多信息：https ://material-ui-pickers.dev/api/KeyboardDatePicker

也将更format改为MM/yyyy

format="MM/yyyy"

这里有一个沙箱供您参考：