シンプルなカレンダーフォームを作る方法
日付選択をする際にでてくるあのカレンダーを作る方法を紹介します。
documentではdomに属性をつけてオプションを指定しているのがほとんどですが、属性をつけるとごちゃごちゃするので、jsに書きます。
準備
以下のライブラリが必要です。
リンクを付けましたので、ダウンロードしてください。
もしくは、npmで環境を整えても良いです。
- jquery
- https://jquery.com/download/
npm install jquery
- air-datepicker
- https://github.com/t1m0n/air-datepicker
npm install air-datepicker
ダウンロードしてサンプルを作っているので、npmで用意した場合はそれぞれの環境に置き換えてください。
おそらく、node_modules以下にファイルがあるはずです。
inputをクリックするとカレンダーが表示されるサンプル
sample.html
<html> <head> <link href="../dist/css/datepicker.min.css" rel="stylesheet" type="text/css"> <script src="./jquery-3.2.1.min.js"></script> <script src="../dist/js/datepicker.min.js"></script> <!-- Include English language --> <script src="../dist/js/i18n/datepicker.en.js"></script> <script src="./sample.js"></script> </head> <body> <div> <input type='text' id="jsDatePicker"/> </div> </body> </html>
sample.js
(function() { // docs // http://t1m0n.name/air-datepicker/docs/ function sample1() { console.log("called init function."); $('#jsDatePicker').datepicker({ position: "right top", language: 'en', minDate: new Date() // Now can select only dates, which goes after today }); } function init() { sample1(); } document.addEventListener("DOMContentLoaded", function() { init(); }, false) })()
カレンダーの日付をクリックするとアラートが表示されるサンプル
onSelectオプションを使用するとできます。
callbackで渡される引数には以下の値が入ります。
- fd: フォーマットされた日付
- date: date object
- inst: datepickerのインスタンス
これを使うと、選択された日付のタスクを横に出すとかできます。
multipleDates: true
をオプションに追加した場合は、dateが配列になります。
range: true
に設定した場合は、開始日と終了日が入った配列になります。
function sample2() { console.log("called init function."); $('#jsDatePicker').datepicker({ position: "right top", language: 'en', multipleDates: false, minDate: new Date(), // Now can select only dates, which goes after today onSelect: function(fd, date, inst) { alert('selected date.'); console.log(fd); // 10/17/2018 console.log(date); // date.getFullYear() // date.getMonth() // date.getDate() } }); }
最後に
air-datepickerのドキュメントはとても読みやすいので参照してみてください。
今回紹介したサンプルもドキュメントに書かれているサンプルから取っています。