date-pickerライブラリ「flatpickr」
シンプルで洒落たカレンダー「flatpickr」にたどり着きました
(2018/11/26 更新) デモをCodePenで公開しました。
(2018/12/01 更新) 「土日に色を付ける」を追記しました。
公式サイトはこちら
説明が英語なので、オプションの設定方法等が分かりづらかったのでメモ。
基本的な利用方法
予め、jQueryとflatpickrを読み込みます
|
1 2 3 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css"> <script src="https://unpkg.com/flatpickr"></script> |
その後は、inputタグにトリガーとなる任意のクラス名やID名を設定
|
1 |
<input type="text" class="lib-flatpickr1"> |
scriptでトリガーとなるクラス名等を設定し、flatpickrを初期化
|
1 2 3 4 |
<script> // flatpickrの初期化 $(".lib-flatpickr1").flatpickr(); </script> |
以下の様にカレンダーを表示することができます。
See the Pen flatpickr by s_fuji (@s_fuji) on CodePen.
オプションの利用方法
オプションは以下の様な形で定義します。
デフォルトは「yyyy-MM-dd」形式で表示されますが、「yyyy/MM/dd」形式で表示することができます。
|
1 2 3 4 5 6 7 |
<input type="text" class="lib-flatpickr2"> <script> // flatpickrの初期化 $(".lib-flatpickr2").flatpickr({ dateFormat: "Y/m/d", }); </script> |
See the Pen flatpickr-option by s_fuji (@s_fuji) on CodePen.
日本語化対応
日本語化のライブラリを読み込みます。
|
1 |
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script> |
オプションで「”locale”: “ja”」を設定することでカレンダー上部の月表示を日本語化することができます。
|
1 2 3 4 5 6 7 |
<input type="text" class="lib-flatpickr3"> <script> // flatpickrの初期化 $(".lib-flatpickr3").flatpickr({ "locale": "ja", }); </script> |
See the Pen flatpickr-japanese by s_fuji (@s_fuji) on CodePen.
土日に色を付ける
CSSで色を付ける設定内容です。
See the Pen flatpickr_saturday_Sunday_color by s_fuji (@s_fuji) on CodePen.
最後まで読んでいただきありがとうございました^^
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント