JS製の軽量なdate-pickerライブラリ「flatpickr」



Javascript製の軽量なデイトピッカー(日付選択)ライブラリ「flatpickr」の紹介です。

普段目にするWebページでカレンダーを表示するdateピッカーに触れる機会は少ないと思いますが、社内システムやCMS、その他管理システムでは 日付を扱う際によく使ったりします。

dateピッカーのライブラリは色々種類がありますが、jquery-uiやbootstrap等の外部ライブラリに依存していていたり、容量が大きかったりします。

そんなWeb上で日付を扱う事情ですが、軽量 & 外部ライブラリの依存が無いjavascript製ライブラリが「flatpickr」です。

flatpickrを導入すると下記のようなdate-pickerが使えます 

# flatpickrに対応してるブラウザ
IE 9 以上, Edge, 
iOS Safari 6 以上,  Google Chrome 8 以上, 
Firefox 6 以上

公式ページの各date-pickerライブラリとのサイズ比較

っということで、flatpickrを使ってみました!


flatpickrの導入 

flatpickrの導入は、サイトから直接ダウンロードする他にnpmとbowerにも対応しています。

# npmからインストールする場合
npm install flatpickr

# bowerからインストールする場合
bower install flatpickr-calendar


基本的な使い方は以下のスニペットの様にinputフォームのクラスやidを指定するだけで、直ぐに使えるようになります。

<head>
  <!-- デフォルトのテーマ  -->
  <link rel="stylesheet" href="flatpickr-calendar/dist/flatpickr.min.css">
  <!-- テーマを変更する場合 : 青色  -->
  <!-- <link rel="stylesheet" href="flatpickr-calendar/dist/flatpickr.material_blue.min.css"> -->
  <script src="flatpickr-calendar/dist/flatpickr.min.js"></script>
</head>

<body>
  <!-- input属性に 'date-minndate=today'を追加するだけです -->
  <input id="calendar" data-mindate=today type="text" />

  <script>
    // flatpickrの初期化
    flatpickr('#calendar');
  </script>

</body>

オプション無しでflatpickerを起動

 

カレンダー用のテーマも用意されていて、使いたいテーマ用のCSSを読み込めば適用されます。

用意されているテーマは7種類 ( オレンジ色が画像以外に用意されています )


flatpickrの日本語化 〜 使い方 

flatpickrはデフォルトでは曜日や月が英語表記で表示されますが、国際化用の設定も用意されています

 var toJPN = { 
               weekdays : ['日', '月', '火', '水', '木', '金', '土'],
               months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月',
                         '8月', '9月', '10月', '11月', '12月'
                       ]
              };

// '曜日'を日本語化
flatpickr.init.prototype.l10n.weekdays.shorthand = toJPN.weekdays;
    
// '月'を日本語化
flatpickr.init.prototype.l10n.months.longhand = toJPN.months;

// flatpickrを起動させるinputのID *classでも可
flatpickr('#yourCalendar');

曜日と月を日本語化してみました



当日以前の日付を無効にすることも簡単で、こちらのほうはhtml側で調整出来ます。

<!-- input属性に 'date-minndate=today'を追加するだけです -->
<input id="calendar" data-mindate=today type="text" />

'date-minndate' オプションを導入することで過去の日を選択出来ないように制限できます


flatpickrは外部ライブラリに依存していないので、他のライブラリと併用しても問題なく使えます。デフォルトではインプットをクリックするとカレンダーが開かれますが、アイコンに併用することも可能。またキャンセルボタンで選択した日付をクリアーすることも出来ます。

<!-- Bootstrapのインプットフォーム + アイコン・ボタンでの組み合わせ -->
<div class="flatpickr input-group" data-wrap="true" data-clickOpens="false">
   <!-- data-input属性で クリックされた日にちをフォームにセット -->
   <input type="text" name='demo3' class="form-control"  placeholder="アイコンとセット" data-altinput=true data-input >
   <!-- data-toggle属性でカレンダーオープン、 data-clear属性でフォームの値をクリアーしています -->   
   <a class="input-group-addon" data-toggle><i class='fa fa-calendar'></i></a>
   <a class=" input-group-addon" data-clear><i class='fa fa-close'></i></a>
</div>
  
<script>
 // この組み合わせで使う時は idベースではなく、クラス名ベースでライブラリの初期化が必要です。
 flatpickr('.flatpickr');
</script>

Bootstrapのinput-groupとfont-awesomeアイコンを併用してみました


その他にも、選択不可能な日のインターバル ( 期間 ) を与えることも出来ます。業務システムであれば、定休日や連休等の特定の期間中は選択出来ないようにしたい時に使うと便利です。

// javascript側
/* # id calendarに適用
 * # 2016 06月12 ~ 16日、 6月28日を選択不可に
 */
flatpickr('#calendar', {
                  disable:[
                    { // 選択不可な期間
                      from: "2016-06-12",
                      to: "2016-06-16"
                    },
                    "2016-6-28" // 日付のみ
                  ],
                  minDate: "2016-06-1" // スタード日
                }
         );

// 休日等の選択不可の日を実際に扱う場合は下記の様になると思います
$.get('/disableDay', function(result){
    // サーバーから休日を取得 * from toのインターバルだと使い辛いと感じました
    // result.holiday = ['2016-06-12', '2016-06-13', '2016-06-14']
    flatpickr('#calendar',{
      disable: result.holiday
    }, minDate: new Date()
    );
});

2016年 6月12日 ~ 6月16日, 6月28日を選択不可に

* 実際に動かしたデモ

See the Pen pbyvWZ by cupof (@cupof-github) on CodePen.

Summary

以上がflatpickrの紹介でした。

実際に使ってみた感想のまとめが、、、

flatpickrの良い利点

 1. 外部ライブラリ依存がないので既存のページにも安心して使える
 2. 使い方は比較的簡単
 3. カレンダーのテーマが複数用意されているので、ページにあったデザインに適用できる
 4. デイトフォーマットがmysqlのdatetime形式に近いのでフォーマットの加工を考えなくて良い
 
今後に期待したい点
 1. 曜日毎にdisable(選択を無効)出来るようになればもっと使い勝手がよくなりそう
( * 現在は対応済み )
 
以上のように感じました。

「サイトリニューアルでjquery-uiのdatepickerから他ライブラリに乗り換えたい。。」なんて考えてる人にはピッタリだと思うのでゼヒ×2チェックしてみてください!

( * flatpickr Version 3 を使用したデモページを新たに作成しました ) :  flatpickrを使ったデモ | cupOF Demo

公式ページ: flatpickr
 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ