Flatpickr使ってみた

2023年9月25日 20:04

こんにちは

私はWeb業界でフロントエンドエンジニアとして働いています。
皆さん（特にエンジニアの方）はどんなライブラリを使用したことがありますか？

今回は年月日の入力フィールドを作成するにあたって私が最近使用したライブラリについて紹介できたらと思います。

デバイスごとのカレンダーの見え方

Webの入力フィールドを作成するにあたり、HTMLで「input type = “date”」を使用して生年月日の入力フィールドを作成します。
他にも様々な方法はありますが今回はこの「input type = “date”」を焦点に話をしていきます。

これを記述すると年月日の入力フィールドがブラウザに反映されます。
以下はGoogle Chromeで見た場合の各デバイスごとの見え方になります。

ご覧の通り、各デバイスごとでデザイン、表示項目が違います。
また、バージョンによって表示内容も変わってしまうので、OSとブラウザとでは挙動が変わってしまいます。

そこで私はUIの統一をするためにFlatpickrという日時入力補助ライブラリを使用することにしました。

Flatpickrについて

Flatpickrは、日付や時間を簡単に選べるツールです。
動作も軽く、スマホでの対応もでき、様々な言語にも対応しています。
また、自分の好みに合わせてデザインや使用したい機能を追加できるのでカスタマイズが可能です。
Flatpickrは日本語訳のドキュメントがあるので、はじめて使う方でも読みやすく、導入しやすいと思います。

インストール方法

1.CDNを利用する

もっとも手軽なのは、CDN (Content Delivery Network) 経由でFlatpickrを読み込む方法です。
以下のようにHTMLファイルの<head>セクションに以下のリンクを追加してください。

<!-- FlatpickrのCSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- FlatpickrのJS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- 日本語にする場合は下記を追記 --> 
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

これでFlatpickrを利用できるようになります。

2.npmやyarnを利用する方法

Node.jsを利用しているプロジェクトの場合、npmやyarnを使ってFlatpickrをインストールすることができます。

#npmを使用する場合
  npm i -D  flatpickr

#yarnを使用する場合
  yarn add flatpickr

インストールが完了したら、プロジェクトの中で以下のようにインポートして使用できます。

// javascript
import "flatpickr/dist/flatpickr.min.css"; // 必要なCSS
import flatpickr from "flatpickr";

これで準備は完了です。
これで日付や時間の選択機能を実装できます。
どちらを選択するかはプロジェクトの要件や開発環境、将来的な拡張性を考慮して決定すると良いと思います。

基本的な使い方

1.HTMLの準備

まず<input>要素をHTMLに配置します。

<input type="text" id="datepicker">

「input type="number”」で配置しても問題ありません。

2.Flatpickrの実装

上で配置した<input>要素にflatpickrを実行します。

flatpickr("#datepicker");

このコードにより、id="datepicker"のinput要素にFlatpickrが適用されます。

3.オプションの設定

Flatpickrは多くのオプションを提供しており、これを利用して日付ピッカーの挙動や見た目をカスタマイズできます。
例えば、言語、日付の範囲を制限する場合や時間の選択を追加する場合はこのようになります。

flatpickr("#datepicker", {
　　locale: 'ja',
  minDate: "2023-01-01",
  maxDate: "2023-12-31",
  enableTime: true,
  dateFormat: "Y-m-d H:i",
});

このオプションは、日本語対応にして、選択可能な日付を2023年の間に制限して時間を選択可能にし、フォーマットを年-月-日時:分に設定しています。

また、スマートフォンなどにも対応したい場合はdisableMobileオプションを追加します。

flatpickr("#datepicker", {
  disableMobile: true
});

これでスマートフォンにもFlatpickrが適用されます。

その他にもFlatpickerには多数のイベントが存在します。
ここでは一例としてonReadyイベントを使用してみます。

こちらがonReadyイベントの使用例になります。

flatpickr("#datepicker", {
            onReady: function(dateObj, dateStr, instance) {
                const clearButton = document.createElement("div");
                clearButton.innerHTML = "クリア";
                clearButton.classList.add("clear-button");
                clearButton.addEventListener("click", function() {
                    instance.clear();
                });
                instance.calendarContainer.appendChild(clearButton);
            }
        });

Flatpickrのインスタンスが準備（初期化）ができたときにクリアボタンを追加して、ボタンがクリックされたらinstance.clear()で選択された日付を削除することができます。

その他にもFlatpickrはデザインも自由に変更できます。
以下のサイトからレイアウトイメージを確認することができ、flatpickr.min.cssを読み込んだ下に選択したテーマのCSSを追加して使用することができます。

対応しているブラウザ

Chrome8以降、Firefox6以降、IE9以降、Safari 6以降が使用できます。

まとめ

Flatpickrを使用してみて、カスタマイズがしやすく初心者でも問題なく使用することができました。
また、テーマやCSSのオプションも豊富で、サイトのデザインやブランドカラーに合わせたカスタマイズも簡単にできました。

Flatpickrはブラウザやデバイスごとに依存せず、統一して表示できるので一貫してUIデザインを提供することできます。
既にある入力フィールドを使用するのみにとどまらず、UI/UX視点からの検討材料として今後、使用してみるのもありかなと思います。

最後までお読みいただき、ありがとうございました。

この記事が気に入ったらサポートをしてみませんか？