【React】tailwindcssとMantineUIで作るDatePickerコンポーネント~日本語対応~
はじめに
この記事の概要
こんにちは、株式会社TOKOSのスギタです！
今回はTailwind CSSを用いてUIライブラリMantineを使いDatePickerコンポーネントを作成する方法を説明していきたいと思います。
Mantineについてわからない方は下記を参考にしてください！
【React】tailwindcssで作るMantineUIのMultiSelectコンポーネント
この記事ではReact専用のUIライブラリのMantineとTailwind CSSをあわせた使い方がわかります。
対象読者
- Reactを用いたWEB制作、WEB開発を行っている方
Tailwind CSSを使用しながらUIライブラリを使用したい方
開発環境
開発環境は下記になります。
react: 18.2.0next.js: 13.2.3typescript: 4.9.5@mantine/core: 6.0.13@mantine/hooks: 6.0.13@mantine/dates: 6.0.13dayjs: 1.11.8
下記参照内でフレームワークを選択してください。
今回はNext.jsで行っていきたいと思います！
また使用したいパッケージを選択してインストールしてください。
今回はmantine/coreではなくmantine/datesのコンポーネントを使用しますが、@mantine/datesは@mantine/coreと@mantine/hooksに依存しているため、併せてインストールしてください！
また@mantine/datesはdayjsにも依存しているので、こちらも併せてインストールしてください！
Getting started
React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience
v6.mantine.dev完成予定
今回の完成予定は下記になります。
DatePickerの実装
いつも通り公式ドキュメントを参照して、一番近しい箇所をコピペしていきたいと思います。
DatePickerInput
Date, multiple dates and dates range picker input
v6.mantine.dev今回は公式ドキュメントの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} onChange={setValue} />
}これがベースとなります。
上記より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}
onChange={setValue}
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を確認して追加します。
クリアボタンはclearable: 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}
onChange={setValue}
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]",
}}
clearable
/>
)
}これで入力欄のクリアボタンは完了です。
次は現在英語表記なのを日本語表記に変更したいと思います。
ここからカレンダーの表記設定を行っていきます。
日本語設定などのカレンダーの表記設定は@mantine/dates内の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}
onChange={setValue}
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]",
}}
clearable
/>
</DatesProvider>
)
}DatesProviderコンポーネントをインポートし囲ってあげれば完了です。
DatesProviderコンポーネントのPropsでsettingsにオブジェクトで変更したい内容を渡していきます。
まずはfirstDayOfWeekですが、カレンダーの一番左に来る曜日を指定できます。
0~6のnumberを渡すことができ、デフォルトは1で月曜になっています。
今回は日曜スタートにしたいので、0を渡してます。
次に日本語変換ですが、localeにdayjsから対応するlocaleモジュールを渡す必要があります。
デフォルトは"en"です。
今回は日本語にしたいので、dayjsのlocaleからjaをインポートしそれを渡しています。
これで設定完了になります。
おまけ機能
ここからは、よく使用する機能の紹介をします。
日付選択時に今日より前の日付を選択できないようにする(特定の日付以前を制限する)機能を紹介します。
公式のComponent propsを確認してPropsを追加していきます。
使用するPropsはminDate: Dateを使用します。
また今日の日付を渡せば良いので、new Date()を使い今日の日付を渡せば完了です。
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}
onChange={setValue}
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]",
}}
minDate={new Date()}
clearable
/>
</DatesProvider>
)
}さいごに
今回はMantineのcoreパッケージではなくdatesパッケージを使用しての実装をしてみました。
やはり公式ドキュメントが素晴らしくわかりやすく簡単に実装していくことができると感じました。
他のコンポーネントやhooksも良いものがあればまた紹介します！
この記事を書いた人