Flatpickrを使ってカレンダーを作ってみよう！

はじめに

フォーム作成時に、日付を簡単に入力させたい！

ただ日付を入力するだけだとつまらない。。。

などなど、フォームの日時入力欄を少しリッチに実装したいなんて経験はあるのではないでしょうか？

そんな時は、javascriptのライブラリ「Flatpickr」がおすすめです！
Jqueryの知識がなくても実装する事ができます！

まずは実際にFlatpickrを確認したいと思います。

日時入力欄を押下

カレンダー内の日付押下

時間も設定する事ができます。

簡単に日時を入力する事ができました！
ただ日付を入力するよりも分かりやすくて、本格的な感じがしませんか？？

導入は簡単ですし、設定を変更してあげるだけで色々と調整する事もできます！

早速Flatpickrを実装してみましょう！
使うファイルはJS、HTML、CSSだけでOKです。

準備

まずはインストールします

npm i -D flatpickr

各ファイルで読み込んであげます

javascript

import flatpickr from 'flatpickr/dist/flatpickr.min.js';
import { Japanese } from "flatpickr/dist/l10n/ja.js" //日本語用モジュール

html

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

実装方法

jsファイルでflatpickrの後に、IDを指定します。

javascript

// カレンダー設定
flatpickr("#event_date", {
    locale: Japanese, //日本語化
    minDate: "today", //今日以降の日付を選択できるようにする
    maxDate: new Date().fp_incr(30), // 今日から30日まで選択できるようにする
});

// 時間設定
// 開始と終了の設定が共通なためsetting変数に格納
const setting = {
   locale: Japanese,         //日本語化
    enableTime: true,       //タイムピッカーに設定
    noCalendar: true,       //同上
    dateFormat: "H:i",      //同上
    time_24hr: true,         //24時間
    minTime: "10:00",      //下限値を10:00
    maxTime: "20:00",     //上限値を20:00
  
};

flatpickr("#start_time", setting);
flatpickr("#end_time", setting);

html

                     <div class="mt-4">
                         <input type="text" id="event_date" value="イベント日付" />
                     </div>
   
                     <div class="mt-4">
                         <input type="text" id="start_time" value="開始時間" />
                     </div>
                     
                     <div class="mt-4">
                         <input type="text" id="end_time" value="終了時間" />
                     </div>

これでカレンダーと時間の表示ができました！

javascriptの設定を調整する事で色々なことが実装できます！
参考までにリンク貼ります。

Flatpickr

最後に

タイムピッカー系のライブラリはflatpickr以外にも沢山あります。
もし業務で使うのであれば、Jqueryに対応してるライブラリを使ってみるの良いかもしれないです。

最後まで読んでいただきありがとうございました！