【MUI】MUIを用いて時間指定する仕組みを作成する

やること

Next.jsで時間を指定するUIを作成する。

やり方

コード読みたい人は下記URLから
https://github.com/manntera/ogt-home-platform-front/commit/d9c4263ac2275665dc8c5f2d415039ef60c81ad9

ライブラリをインストール

npm install @mui/x-date-pickers

コードを書く

インポートするやつ

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';

実装

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={'ja'}>
    <DateTimePicker
        label="記録日時"
        defaultValue={dayjs()}
        value={selectedDate}
        onChange={(val) => setSelectedDate(val)}
        format='YYYY/MM/DD HH:mm'
        ampm={false}
    />
</LocalizationProvider>		    

• LocalizationProviderでAdapterDayjsとかいうライブラリを適用するらしい。リファレンス読んでもよくわからん、リファレンス Providerってのがグローバル変数のスコープみたいなのなので、LocalizationProvider内のコンポーネント全てに適用される感じなのかな？
• DateTimePickerで時間を指定できるアレのUIを作成できる。引数はリファレンス見て。