Material UI Reactの月と年の選択について質問する

Question

マテリアルUI V5

Material UI v5ではDatePicker、@mui/labサードパーティのパッケージをインストールする必要がなくなりました。月と年のみに制限するには、view小道具このような：

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

ライブデモ

Answer 1