[DateRangePicker] JavaScriptでカレンダーを表示する

JavaScriptでカレンダーを表示するライブラリを紹介します。

DateRangePicker
http://www.daterangepicker.com/

JavaScriptライブラリ

Bootstrap: 3.3.7
jQuery: 3.3.1
DateRangePicker: 3.0.3
Moment.js: 2.24.0 

ライブラリの読み込み

daterangepicker.cssとdaterangepicker.jsを参照します。

ライブラリを読み込む

<link rel="stylesheet" type="text/css" href="../lib/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="../lib/daterangepicker/daterangepicker.js"></script>

カレンダーの表示

inputテキストボックスをHTMLに実装します。

テキストボックスを表示する

<input class="form-control text-box single-line" type="text" id="inputText1" />

inputテキストボックスに対して、daterangepicker関数で初期化します。
singleDatePickerは表示するカレンダーの数を指定できます。trueが1つ、falseが2つとなります。showDropdownsはtrueを指定すると、年と月のドロップダウンリストが表示されます。

カレンダーを1つ表示する

var FORMAT_YYYYMMDD = 'YYYY/MM/DD';

$('#inputText1').daterangepicker({
    singleDatePicker: true,
    showDropdowns: false,
    locale: {
        format: FORMAT_YYYYMMDD
    }
}, function (start, end, label) {
    log(moment(start).format(FORMAT_YYYYMMDD));
});

カレンダーで期間を指定する

カレンダーを2つ表示すると、期間を指定することができます。
初期化時に関数を指定することで、カレンダー上で日付を選択したときの日付を取得することができます。startは開始日、endは終了日となります。

カレンダーを2つ表示する

$('#inputText3').daterangepicker({
    singleDatePicker: false,
    showDropdowns: false,
    locale: {
        format: FORMAT_YYYYMMDD
    }
}, function (start, end, label) {
    log('start=' + moment(start).format(FORMAT_YYYYMMDD));
    log('end=' + moment(end).format(FORMAT_YYYYMMDD));
});

デモはこちら
ソースファイルはこちら

以上です。