日付の範囲指定用プラグイン「DateRangePicker」の利用方法

日付型のデータを検索する際に開始・終了日のテキストボックスを用意し、それぞれにタイムピッカー系プラグインを効かせることが多い。これを1つのテキストボックスでまとめて指定させたい。また「過去7日間」「今月」「先月」等を簡単に選択させたい。「DateRangePicker」プラグインで実装できる模様。以下に実装方法をメモ。

DateRangePicker

公式サイト

https://www.daterangepicker.com/

GitHub

https://github.com/dangrossman/daterangepicker

CDN

CDNで使う場合は以下を記述する。

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/locale/ja.min.js"></script>

<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css">

サンプル

https://taitan916.info/sample/DateRangePicker/

テキストボックス部分をクリックするとピッカーが表示され、「過去7日間」「今月」「先月」等を選択すると指定した期間が入力される筈。また「範囲を指定」を選択すると自由に範囲が指定できる。

実装方法

ソースコード

<input type="text" id="date" readonly>
<input type="hidden" name="start" id="start">
<input type="hidden" name="end" id="end">

<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!-- moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/locale/ja.min.js"></script>

<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.min.css">

<script>
$(function(){
    moment.locale("ja");
    $('#date').daterangepicker(
        {
            ranges: {
                '今日': [moment(), moment()],
                '昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '過去7日間': [moment().subtract(6, 'days'), moment()],
                '過去30日間': [moment().subtract(29, 'days'), moment()],
                '今月': [moment().startOf('month'), moment().endOf('month')],
                '先月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            startDate: moment(),
            endDate: moment(),
            format: "YYYY-MM-DD",
            locale: { applyLabel: "OK", customRangeLabel: "範囲を指定"}
        },
        function( start, end ){
            $('#start').val(start.format('YYYY-MM-DD'));
            $('#end').val(end.format('YYYY-MM-DD'));
        }
    );
});
</script>

解説等

上記ソースコードの場合、日付を選択するとhidden属性の#start / #endにそれぞれ指定した開始・終了日が入る。

もちろんhidden属性を利用せず、フォームの送信後にPHP等で整形処理しても良い。

尚、readonly属性を付与しておかないとキーボード入力が有効になるので注意すること。

参考サイト

https://kimagureneet.hatenablog.com/entry/2016/01/26/145819