完成イメージ
目次
- ドキュメントを実装
- 見た目を作成
- DatePickerを日本語化
- 「次月」「先月」ボタンで日付を変更できるようにする
- DatePickerで選択した日付をstateで管理
1.ドキュメントを実装
修正点
- date-fnsライブラリで必要なものをインストール・インポート（注:date-fnsのv2とv3からでインポートの仕方が違います。）
- 日付ライブラリーアダプターをセットアップ
MonthlySelector.tsx
import { Box, Button } from "@mui/material";
import React from "react";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
const MonthSelector = () => {
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Box>
<Button>
先月
</Button>
<DatePicker />
<Button>
次月
</Button>
</Box>
</LocalizationProvider>
);
};
export default MonthSelector;
2.見た目を作成
修正点
- ラベルを追加
- 横並び中央に配置
- ボタンにカラーを指定
- DatePickerとボタンの間に余白を追加
MonthlySelector.tsx
import { Box, Button } from "@mui/material";
import React from "react";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
const MonthSelector = () => {
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Box
sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
>
<Button color={"error"} variant="contained">
先月
</Button>
<DatePicker label="年月を選択" sx={{ mx: 2, background: "white" }} />
<Button color={"primary"} variant="contained">
次月
</Button>
</Box>
</LocalizationProvider>
);
};
export default MonthSelector;
3.DatePickerを日本語化
修正点
- 今の段階では英語版なので、日本語とは日付の形式が逆になってしまいます。これを修正していきます。
- 今の段階では日付まで選択できるようになっていますが年と月のみ選択できるようにします。
- ポップアップの表示（注:monthAndYearフォーマットが削除されました。calendarHeaderスロットの新しいformatプロップで置き換えることができます。）
MonthlySelector.tsx
import { Box, Button } from "@mui/material";
import React from "react";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { ja } from "date-fns/locale";
const MonthSelector = () => {
return (
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ja}>
<Box
sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
>
<Button color={"error"} variant="contained">
先月
</Button>
<DatePicker
label="年月を選択"
sx={{ mx: 2, background: "white" }}
views={["year", "month"]}
format="yyyy/MM"
slotProps={{
calendarHeader: { format: "yyyy年 MM月" },
toolbar: {
toolbarFormat: "yyyy年 MM月",
},
}}
/>
<Button color={"primary"} variant="contained">
次月
</Button>
</Box>
</LocalizationProvider>
);
};
export default MonthSelector;
4.「次月」「先月」ボタンで日付を変更できるようにする
修正点
- 日付をStateで管理
- DatePickerのvalueにStateの値を設定
- 「次月」「先月」ボタンを押したときの処理を追加
MonthlySelector.tsx
import { Box, Button } from "@mui/material";
import React from "react";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { ja } from "date-fns/locale";
import { addMonths } from "date-fns";
import { useState } from "react"
import { addMonths } from "date-fns";
const MonthSelector = () => {
const [currentMonth, setCurrentMonth] = useState(new Date())
const handlePreviousMonth = () => {
const previousMonth = addMonths(currentMonth, -1);
console.log(previousMonth);
setCurrentMonth(previousMonth);
};
const handleNextMonth = () => {
const nextMonth = addMonths(currentMonth, +1);
setCurrentMonth(nextMonth);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ja}>
<Box
sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
>
<Button
onClick={handlePreviousMonth}
color={"error"}
variant="contained"
>
先月
</Button>
<DatePicker
value={currentMonth}
label="年月を選択"
sx={{ mx: 2, background: "white" }}
views={["year", "month"]}
format="yyyy/MM"
slotProps={{
calendarHeader: { format: "yyyy年 MM月" },
toolbar: {
toolbarFormat: "yyyy年 MM月",
},
}}
/>
<Button onClick={handleNextMonth} color={"primary"} variant="contained">
次月
</Button>
</Box>
</LocalizationProvider>
);
};
export default MonthSelector;
5.DatePickerで選択した日付をstateで管理（完成系コード）
修正点
- DatePickerで日付を変更したときの処理を追加
- onChangeでDatePickerで選択した日付をstateで管理
MonthlySelector.tsx
import { Box, Button } from "@mui/material";
import React from "react";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFnsV3";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { ja } from "date-fns/locale";
import { addMonths } from "date-fns";
import { useState } from "react";
const MonthSelector = () => {
const [currentMonth, setCurrentMonth] = useState(new Date());
const handleDateChange = (newDate: Date | null) => {
if (newDate) {
setCurrentMonth(newDate);
}
};
const handlePreviousMonth = () => {
const previousMonth = addMonths(currentMonth, -1);
console.log(previousMonth);
setCurrentMonth(previousMonth);
};
const handleNextMonth = () => {
const nextMonth = addMonths(currentMonth, +1);
setCurrentMonth(nextMonth);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns} adapterLocale={ja}>
<Box
sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}
>
<Button
onClick={handlePreviousMonth}
color={"error"}
variant="contained"
>
先月
</Button>
<DatePicker
onChange={handleDateChange}
value={currentMonth}
label="年月を選択"
sx={{ mx: 2, background: "white" }}
views={["year", "month"]}
format="yyyy/MM"
slotProps={{
calendarHeader: { format: "yyyy年 MM月" },
toolbar: {
toolbarFormat: "yyyy年 MM月",
},
}}
/>
<Button onClick={handleNextMonth} color={"primary"} variant="contained">
次月
</Button>
</Box>
</LocalizationProvider>
);
};
export default MonthSelector;
ここまで変更出来れば、完成イメージのようになるかなと思います。
ご覧いただききありがとうございました。