日付の範囲指定用プラグイン「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属性を付与しておかないとキーボード入力が有効になるので注意すること。
参考サイト
関連記事
-
-
jQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する方法
メールアドレスを入力するためのテキストボックスに文字を入力すると「@yahoo. ...
-
-
DateTimePickerで特定日にClassを付与&選択不可にする方法
jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...
-
-
「jQuery.browser is undefined」エラーの対応方法
jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...
-
-
「display: block !important;」指定された要素をjQueryで非表示にする方法
jQueryで特定の要素を非表示にしたかったのでhide()を使用したところ非表 ...
-
-
FullCalendarでカレンダー内のイベントをクリックした際にタイトル以外の内容も表示させる方法
FullCalendarでカレンダー内のイベントをクリックした際にtitle以外 ...