DatePickerSample.md

@material-ui/pickersではなく、@mui/x-date-pickersを使用してDatePickerを作成する方法について説明します。

1. @mui/x-date-pickersのインストール

まずはじめに、Reactのプロジェクトに@mui/x-date-pickersをインストールします。

npm install @mui/x-date-pickers

2. DatePickerのインポート

DatePickerを使用するためには、DatePickerをインポートします。

import DesktopDatePicker from '@mui/x-date-pickers/DatePicker';

3. DatePickerの使用

DatePickerを使用するには、まずDateオブジェクトをstateとして定義します。

import React, { useState } from 'react';
import DesktopDatePicker from '@mui/x-date-pickers/DatePicker';

function App() {
  const [selectedDate, handleDateChange] = useState(new Date());

  return (
    <DesktopDatePicker
      label="日付"
      inputFormat="yyyy/MM/dd"
      value={selectedDate}
      onChange={(date) => handleDateChange(date)}
      renderInput={(params) => <TextField {...params} variant="outlined" />}
    />
  );
}

export default App;

このコードでは、DatePickerを使用して、日付を選択できるようになっています。DatePickerのpropsとして、label、inputFormat、value、onChange、renderInputを指定しています。

• label：DatePickerのラベルを設定します。
• inputFormat：日付を表示する形式を指定します。
• value：選択された日付を保持するDateオブジェクトです。
• onChange：日付が選択されたときに呼び出される関数です。
• renderInput：DatePickerの外観を指定するための関数です。

このコードを実行すると、DatePickerが表示され、日付を選択できるようになります。