Javascript製の軽量なデイトピッカー(日付選択)ライブラリ「flatpickr」の紹介です。
普段目にするWebページでカレンダーを表示するdateピッカーに触れる機会は少ないと思いますが、社内システムやCMS、その他管理システムでは 日付を扱う際によく使ったりします。
dateピッカーのライブラリは色々種類がありますが、jquery-uiやbootstrap等の外部ライブラリに依存していていたり、容量が大きかったりします。
そんなWeb上で日付を扱う事情ですが、軽量 & 外部ライブラリの依存が無いjavascript製ライブラリが「flatpickr」です。
# flatpickrに対応してるブラウザ
IE 9 以上, Edge,
iOS Safari 6 以上, Google Chrome 8 以上,
Firefox 6 以上
っということで、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>
カレンダー用のテーマも用意されていて、使いたいテーマ用のCSSを読み込めば適用されます。
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" />
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>
その他にも、選択不可能な日のインターバル ( 期間 ) を与えることも出来ます。業務システムであれば、定休日や連休等の特定の期間中は選択出来ないようにしたい時に使うと便利です。
// 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()
);
});
* 実際に動かしたデモ
See the Pen pbyvWZ by cupof (@cupof-github) on CodePen.
以上がflatpickrの紹介でした。
実際に使ってみた感想のまとめが、、、
flatpickrの良い利点
1. 外部ライブラリ依存がないので既存のページにも安心して使える
2. 使い方は比較的簡単
3. カレンダーのテーマが複数用意されているので、ページにあったデザインに適用できる
4. デイトフォーマットがmysqlのdatetime形式に近いのでフォーマットの加工を考えなくて良い
今後に期待したい点
1. 曜日毎にdisable(選択を無効)出来るようになればもっと使い勝手がよくなりそう
( * 現在は対応済み )
以上のように感じました。
「サイトリニューアルでjquery-uiのdatepickerから他ライブラリに乗り換えたい。。」なんて考えてる人にはピッタリだと思うのでゼヒ×2チェックしてみてください！
( * flatpickr Version 3 を使用したデモページを新たに作成しました ) : flatpickrを使ったデモ | cupOF Demo
