シンプルなカレンダーフォームを作る方法

日付選択をする際にでてくるあのカレンダーを作る方法を紹介します。

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()
        }
    });
}