カレンダーUIを実装する依存なしのJavaScriptライブラリ
カレンダーUIを実装するJavaScriptライブラリの紹介です。
Webアプリ上の入力フォームに、日付を選択する項目を実装したときのこと。
input type="date" を使いたいのだけど・・・
HTMLのinputタグに、「type="date"」を指定すると、一部のブラウザではカレンダーUIを表示してくれますが、主要ブラウザすべてにサポートされるのはまだまだ先のようで、案件で使うのは難しそうでした（2016年1月現在）。
参考：Can I use... Support tables for HTML5, CSS3, etc
※この仕様自体が、WHATWGのLiving Standardsであり、HTML5の仕様として勧告されているわけではないので、ブラウザのサポートはなかなか進まないのかもしれません。
jQueryやjQuery UIに依存したくない
カレンダー方式で日付を入力するUIとなると、まずjQuery UIのDatepickerが思い浮かびました。デザインも色々なパターンがあり、jQuery製ということで各種のブラウザ対応や安定性も保証できて良いのですが、最近はjQueryを使わないWebアプリの案件もあり、カレンダーのためだけにjQuery＋jQuery UIを読み込む、というのはあまり良い方法には思えませんでした。
「Kalendae」
それで、ピュアJavaScriptで動作するライブラリを探したところ、「Kalendae」というものに行き当たりました。
GitHubにコードとドキュメントがあります：GitHub - ChiperSoft/Kalendae: A javascript date picker that just works.
GitHubのスター数は1,700を超えており（2016年1月現在）、開発も止まっていないようなので、良さそう！ということで、使ってみることにしました。
特徴としては、
- 依存ライブラリなし（※）
- 単一の日付選択と、期間選択の両方が可能。他にもオプションはいろいろある。
- click、changeなどのイベント取得や、リセットなど、必要になりそうなAPIはきちんと揃っている印象
- 見た目はCSSでカスタマイズ可能
- モダンブラウザとIE8に対応
※ドキュメントにも「依存はないよ」というようなニュアンスのことが書いてあるのですが、実際にはmoment.jsを使っています。ですがKalendaeにはstand alone版があり、こちらはkalendae.jsのコードにmoment.jsを含めて配布しているものなので、読み込むファイルはこれ1つで済みます。
（どちらもMITライセンスなので、ソースコードに丸ごと含めてしまっても問題ないわけですね。）
つまり、
- 基本的には・・・stand alone版のkalendae.js
- すでにmoment.jsを読み込んでいるよ、という場合は・・・moment.jsを含まないkalendae.js
を使えば良い、と思います。
ファイルサイズ
- kalendae.js 34KB
- kalendae.min.js 17KB
- kalendae.standalone.js 132KB
- kalendae.standalone.min.js 51KB
上記の他に、
（バージョン0.5.5で確認）
実装例
kalendae.cssとkalendae.standalone.min.jsを読み込んで、ボタン用の画像はCSSと同じ階層に置いておきます。
そこで以下のように書くと、
<input type="text" class="auto-kal">
こうなります
オプション指定例：
<input type="text" class="auto-kal" data-kal="format: 'YYYY/MM/DD', months: 2, mode: 'range', direction: 'future'">
（フォーマットを年/月/日、2ヶ月分表示、期間選択、未来の日付のみ選択可能）
非jQueryなプロジェクトでカレンダーが必要なときは、しばらくはこのKalendarにお世話になろうと思います！
