【React】tailwindcssとMantineUIで作るDatePickerコンポーネント~日本語対応~

はじめに

はじめに

この記事の概要

こんにちは、株式会社TOKOSのスギタです！
今回はtailwindcssを用いてUIライブラリMantineを使いDatePickerコンポーネントを作成する方法を説明していきたいと思います。
Maneineについてわからない方は下記を参考にしてください！

【React】tailwindcssで作るMantineUIのMultiSelectコンポーネント

対象読者

Reactを用いたWEB制作、WEB開発を行っている方
tailwindcssを使用しながらUIライブラリを使用したい方

開発環境

開発環境は下記になります。

React 18.0.28
Next.js13.2.3
TypeScript 4.9.5
Mantaine 6.0.13
day.js 1.11.8

下記参照内でフレームワークを選択してください。
今回はNext.jsで行っていきたいと思います！
また使用したいパッケージを選択してインストールしてください。
今回はmantaine/coreではなくmantaine/datesを使用するので、@mantine/datesをインストールしてください！
また合わせて一部day.jsを使わないと行けない箇所も有るので、こちらもインストールしてください！

参考

Getting started

Mantin

完成予定

今回の完成予定は下記になります。

DatePickerの実装

いつも通り公式ドキュメントを参照して、一番近しい箇所をコピペしていきたいと思います。

参考

MultiSelect

Mantine

今回は公式ドキュメントのUsage内をコピーしていきます。不必要な箇所は削除しておきます。width関係は別途CSSを当てていくので削除しておきます。

import { useState } from 'react';
import { DatePickerInput } from '@mantine/dates';

const ExamplePage: NextPageWithLayout = () => {
const [value, setValue] = useState<Date | null>(null);
  return (
     <DatePickerInput
      placeholder="Pick date"
      value={value}
    />
  );
}

これがベースとなります。

上記よりCSSを当てていきます。また今回はアイコンも使用するので、アイコンもインポートしておきます。cssは適当なので、お好きなようにしてください！

import { useState } from 'react';
import { DatePickerInput } from '@mantine/dates';
import CalendarIcon from "@/assets/CalendarIcon.svg"

const ExamplePage: NextPageWithLayout = () => {
const [value, setValue] = useState<Date | null>(null);
  return (
     <DatePickerInput
      placeholder="日付を選択"
      value={value}
　　　 icon={<CalendarIcon width={24} height={24} />}
　　　　classNames={{
        icon: "fill-gray-500",
        input: "border-1 border-gray-200",
        placeholder: "text-gray-200",
        root: "max-w-[294px] bg-white rounded min-w-[120px]",
      }}
    />
  );
}

これで基本的な機能は完成していると思います。
ここからはその他必要な機能等を追加していきます。

まずは、入力完了後の入力欄のクリアボタンです。
公式のページ上部タブメニューのComponent propsを確認して追加します。

クリアボタンはclearble:booleanでデフォルトはfalseとなっているので、trueにしてあげれば良さそうです。

import { useState } from 'react';
import { DatePickerInput } from '@mantine/dates';
import CalendarIcon from "@/assets/CalendarIcon.svg"

const ExamplePage: NextPageWithLayout = () => {
const [value, setValue] = useState<Date | null>(null);
  return (
     <DatePickerInput
      placeholder="日付を選択"
      value={value}
　　　 icon={<CalendarIcon width={24} height={24} />}
　　　　classNames={{
        icon: "fill-gray-500",
        input: "border-1 border-gray-200",
        placeholder: "text-gray-200",
        root: "max-w-[294px] bg-white rounded min-w-[120px]",
      }}
     clearble
    />
  );
}

これで入力欄のクリアボタンは完了です。

次は現在英語表記なのを日本語表記に変更したいと思います。

dayjsのインストール

開発環境の説明で触れたように、ここからdayjsを使って行くので、まだインストールしてない方はインストールしてください。

ここからカレンダーの表記設定を行っていきます。
日本語設定などのカレンダーの表記設定はMantineDates内のDatesProviderコンポーネントで行っていきます。

import { useState } from 'react';
import { DatePickerInput, DatesProvider } from "@mantine/dates"
import CalendarIcon from "@/assets/CalendarIcon.svg"
import "dayjs/locale/ja"

const ExamplePage: NextPageWithLayout = () => {
const [value, setValue] = useState<Date | null>(null);
  return (
   <DatesProvider settings={{ firstDayOfWeek: 0, locale: "ja" }}>
     <DatePickerInput
      placeholder="日付を選択"
      value={value}
　　　 icon={<CalendarIcon width={24} height={24} />}
　　　　classNames={{
        icon: "fill-gray-500",
        input: "border-1 border-gray-200",
        placeholder: "text-gray-200",
        root: "max-w-[294px] bg-white rounded min-w-[120px]",
      }}
     clearble
    />
  <DatesProvider />
  );
}

DatesProviderコンポーネントをインポートし囲ってあげれば完了です。
DateProviderコンポーネントのPropsでsettingsPropsにオブジェクトで変更したい内容を渡していきます。

まずはfirstDayOfWeekですが、カレンダーの一番左に来る曜日を指定できます。0~6のnumberを渡すことができ、デフォルトは1で月曜になっています。
今回は日曜スタートにしたいので、0を渡してます。

次に日本語変換ですが、localeにdayjsから対応するlocaleモジュールを渡す必要があります。デフォルトは”en”です。今回は日本語にしたいので、dayjsのlocaleからjaをインポートしそれを渡しています。

これで設定完了になります。

おまけ機能

ここからは、よく使用する機能の紹介をします。
日付選択時に今日以降の日付を選択できないようにする(特定の日付以降)機能を紹介します。
公式のComponent propsを確認してPropsを追加して行きます。
使用するPropsはminDate:Dateを使用します。
また今日の日付を渡せば良いので、dayjsを使い今日の日付を渡せば完了です。

import { useState } from 'react';
import { DatePickerInput, DatesProvider } from "@mantine/dates"
import CalendarIcon from "@/assets/CalendarIcon.svg"
import "dayjs/locale/ja"

const ExamplePage: NextPageWithLayout = () => {
const [value, setValue] = useState<Date | null>(null);
  return (
   <DatesProvider settings={{ firstDayOfWeek: 0, locale: "ja" }}>
     <DatePickerInput
      placeholder="日付を選択"
      value={value}
　　　 icon={<CalendarIcon width={24} height={24} />}
　　　　classNames={{
        icon: "fill-gray-500",
        input: "border-1 border-gray-200",
        placeholder: "text-gray-200",
        root: "max-w-[294px] bg-white rounded min-w-[120px]",
      }}
     clearble
     minDate={new Date()}
    />
  <DatesProvider />
  );
}