MUI DatePickerの使い方

スロット

インストレーション

MUIのX Date Pickersコンポーネントを使用するには、まずMUIのパッケージをインストールする必要があります。

以下のコマンドを実行して、必要なパッケージをインストールしましょう。

npm install @mui/x-date-pickers

// date-fns
npm install date-fns
// or dayjs
npm install dayjs
// or luxon
npm install luxon
// or moment
npm install moment

実装

インポート

mui date pickerと他の必要なライブラリをインポートします。

import { DatePicker } from "@mui/x-date-pickers/DatePicker";

// MUI Date Pickerで使用する日付アダプター
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

// ローカライズを提供するためのLocalizationProvider
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";

// 日付処理ライブラリ Day.js
import dayjs, { Dayjs } from "dayjs";

シンプルDatePicker

import * as React from "react";
import styled from "styled-components";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import dayjs, { Dayjs } from "dayjs";

const Container = styled.div`
  margin: 50px;
`;

export default function MuiDatePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(dayjs());

  return (
    <Container>
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <DatePicker
          label="日付を選択"
          value={value}
          onChange={(newValue) => {
            setValue(newValue);
          }}
        />
      </LocalizationProvider>
    </Container>
  );
}

Output

プロパティを使用したDatePickerの作成

• 例1: 基本的なカスタマイズ

  この例では、minDate、maxDate、format、views、helperTextを使用してDatePickerをカスタマイズしています。

  特定の日付範囲の中から日付を選択する機能を追加しています。

  import * as React from "react";
  import styled from "styled-components";
  import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
  import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
  import { DatePicker } from "@mui/x-date-pickers/DatePicker";
  import dayjs, { Dayjs } from "dayjs";
  
  const Container = styled.div`
    margin: 50px;
  `;
  
  export default function MuiDatePicker() {
    const [selectedDate, setSelectedDate] = React.useState<Dayjs | null>(dayjs());
    const today = dayjs();
    const eventDate = dayjs("2024-06-06"); // イベント日 / 登録締切日
  
    return (
      <Container>
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DatePicker
            label="申請日"
            value={selectedDate}
            onChange={(date) => setSelectedDate(date)}
            minDate={today} // 今日からのイベント日まで選択可能
            maxDate={eventDate} // 締切日
            format="YYYY/MM/DD"
            views={["year", "month", "day"]}
            slotProps={{
              textField: {
                helperText: `イベントの登録日を選択してください。締切日：${eventDate.format(
                  "YYYY/MM/DD"
                )}`,
              },
            }}
          />
        </LocalizationProvider>
      </Container>
    );
  }
  

  Output

  

  追加説明:

  • minDateとmaxDateを設定することで、ユーザーが選択できる日付の範囲を制限しています。

    ここでは、今日から特定のイベント日までの日付を選択可能にしています。

  • formatプロパティを使って、日付の表示フォーマットを"YYYY/MM/DD"に設定しています。
  • viewsプロパティを使用して、ユーザーが年、月、日を選択できるようにビューを設定しています。
  • helperTextを設定することで、ユーザーに対して補助的なメッセージを表示しています。

    ここでは、締切日を案内しています。

  ※同様に、以下のようにformatとviewsを使用して「年月/日」のDatePickerをカスタマイズすることもできます。

  import * as React from "react";
  import styled from "styled-components";
  import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
  import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
  import { DatePicker } from "@mui/x-date-pickers/DatePicker";
  import dayjs, { Dayjs } from "dayjs";
  
  export default function MuiDatePicker() {
    const [selectedYearMonth, setSelectedYearMonth] =
      React.useState<Dayjs | null>(dayjs());
    const [selectedDay, setSelectedDay] = React.useState<Dayjs | null>(dayjs());
  
    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DatePicker
            format="MMMM YYYY"
            label="年月"
            value={selectedYearMonth}
            onChange={(date) => setSelectedYearMonth(date)}
            views={["year", "month"]}
          />
          <DatePicker
            format="DD"
            label="日"
            value={selectedDay}
            onChange={(date) => setSelectedDay(date)}
            views={["day"]}
          />
        </LocalizationProvider>
    );
  }
  

  Output

  

  例2: カスタムスロットとスタイルの使用

  この例では、slotsとslotPropsを使用して、DatePickerの外観と動作をカスタマイズしています。

  特定のコンポーネントをカスタムスタイルでラップし、独自のアイコンを使用しています。

  import styledC from "styled-components";
  import { styled } from "@mui/material/styles";
  import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
  import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
  import { DatePicker } from "@mui/x-date-pickers/DatePicker";
  import dayjs, { Dayjs } from "dayjs";
  import IconButton from "@mui/material/IconButton";
  import EditCalendarRoundedIcon from "@mui/icons-material/EditCalendarRounded";
  import { PickersDay } from "@mui/x-date-pickers/PickersDay";
  
  const StyledButton = styled(IconButton)(({ theme }) => ({
    borderRadius: theme.shape.borderRadius,
  }));
  
  const StyledDay = styled(PickersDay)(({ theme }) => ({
    borderRadius: theme.shape.borderRadius,
    color:
      theme.palette.mode === "light"
        ? theme.palette.secondary.dark
        : theme.palette.secondary.light,
  }));
  
  export default function MuiDatePicker() {
    const today = dayjs();
    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DatePicker
            format="YYYY/MM/DD"
            defaultValue={today}
            label="Styled Picker"
            maxDate={today}
            views={["year", "month", "day"]}
            slots={{
              openPickerIcon: EditCalendarRoundedIcon,
              openPickerButton: StyledButton,
              day: StyledDay,
            }}
            slotProps={{
              field: {
                clearable: true,
              },
              openPickerIcon: { fontSize: "large" },
              openPickerButton: { color: "secondary" },
              textField: {
                variant: "filled",
                focused: true,
                color: "secondary",
              },
            }}
          />
        </LocalizationProvider>
    );
  }
  
  

  追加説明:

  • slotsプロパティを使用して、カスタムコンポーネントを提供しています。

    ここでは、カレンダーアイコン（openPickerIcon）とカレンダーの各日（day）の表示をカスタマイズしています。

  • slotPropsプロパティを使用して、各スロットに対して追加のプロパティを設定しています。

    例えば、カレンダーアイコンのサイズをfontSize: "large"に設定し、ボタンの色をcolor: "secondary"に設定しています。

  • textFieldスロットのプロパティを設定することで、テキストフィールドの外観や動作をカスタマイズしています。

    例えば、variant: "filled"やfocused: trueを使用して、入力フィールドがフォーカスされた状態で表示されるようにしています。

  Output

  

  MUI DatePickerのカスタマイズは、ユーザーインターフェースをより使いやすく、見た目も美しくするための重要な手段です。

  このガイドを参考にして、さまざまなコンポーネントをカスタマイズし、あなたのアプリケーションに最適なDatePickerを作成してください。

  Happy Coding!