テック

「Date Range Picker」で範囲日付を設定する方法

2021年12月15日 by single コメントはまだありません

「Tiny Date Picker」のプロジェクトで『Date Range Picker』があります。
これで、範囲指定をDatePickerを使って設定できます。

「Date Range Picker」で範囲日付を設定する方法

サンプル

–

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Date Range Picker Demo</title>
   <link rel="stylesheet" href="/assets/tiny-date-picker-master/tiny-date-picker.css">
   <link rel="stylesheet" href="/assets/tiny-date-picker-master/date-range-picker.css">
   <style type="text/css">

   /* Date Range の例 */
   .date-range-examples {
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
   }

   .ex-inputs {
      position: relative;
   }

   .ex-inputs-header {
      text-align: center;
      margin-bottom: 8px;
   }

   .ex-inputs-start,
   .ex-inputs-end {
      padding: 8px;
      font-size: 1em;
      border: 1px solid #CCC;
      border-radius: 2px;
   }

   .ex-inputs-start:focus,
   .ex-inputs-end:focus {
      border-color: #46A5F5;
   }

   .ex-inputs-picker {
      position: absolute;
      z-index: 1000;
      left: 50%;
      top: calc(100% + 8px);
      opacity: 0;
      z-index: -20;
      transform: translateX(-50%);
      transition: all 0.25s;
   }

   .ex-inputs-picker-visible {
      opacity: 1;
      z-index: 1000;
   }

   @media (max-width: 616px), (max-height: 480px) {
      .ex-inputs-start,
      .ex-inputs-end {
         width: 100%;
      }
   }
   </style>
</head>
<body>
   <script src="/assets/tiny-date-picker-master/dist/date-range-picker.min.js"></script>
   <div class="date-range-examples">
      <div class="ex-inputs">
         <header class="ex-inputs-header">
            <h1>
               Date Range Picker デモ
            </h1>
            <input class="ex-inputs-start" placeholder="開始日付" />
            -
            <input class="ex-inputs-end" placeholder="終了日付" />
         </header>
         <div class="ex-inputs-picker"></div>
         <script>
            (function () {
               const root = document.querySelector('.ex-inputs');
               const txtStart = root.querySelector('.ex-inputs-start');
               const txtEnd = root.querySelector('.ex-inputs-end');
               const container = root.querySelector('.ex-inputs-picker');

               // DateRangePicker 初期化
               var datePicker = DateRangePicker.DateRangePicker(container, 
                  {
                     // 開始日のオプション
                     startOpts: {
                         lang: {
                              days: ['日', '月', '火', '水', '木', '金', '土'],
                              months: [
                                  '1月',
                                  '2月',
                                  '3月',
                                  '4月',
                                  '5月',
                                  '6月',
                                  '7月',
                                  '8月',
                                  '9月',
                                  '10月',
                                  '11月',
                                  '12月',
                              ],
                              today: '今日',
                              clear: 'クリア',
                              close: '閉じる',
                         },

                        dayOffset: 1
                     },
                     endOpts: {
                         dayOffset: 1
                     } // 終了日のオプション
                  });

                  datePicker.on('statechange', function (_, rp) {
                     // テキストボックスの状態変更時呼び出される処理（日付設定処理）
                     var range = rp.state;
                     txtStart.value = range.start ? convertDateToString(range.start) : '';
                     txtEnd.value = range.end ? convertDateToString(range.end) : '';
                  });
            
               function convertDateToString(date) {
                  return date.getFullYear() + '/' + String(date.getMonth()+1).padStart(2,'0') + '/' + String(date.getDate()).padStart(2,'0');

               }

               // テキストボックスにフォーカスがあたったとき、DatePickerを表示
               txtStart.addEventListener('focus', showPicker);
               txtEnd.addEventListener('focus', showPicker);

               // DatePicker表示
               function showPicker() {
                  container.classList.add('ex-inputs-picker-visible');
               }

               // フォーカスが外れた時にはDatePickerを非表示にする
               let previousTimeout;
               root.addEventListener('focusout', function hidePicker() {
                  clearTimeout(previousTimeout);
                  previousTimeout = setTimeout(function() {
                     if (!root.contains(document.activeElement)) {
                        container.classList.remove('ex-inputs-picker-visible');
                     }
                  }, 10);
               });
            }());
         </script>
      </div>
   </div>
</body>
</html>

デモ

インストール方法

インストール方法については「Tiny Date Picker」をインストールすると関連ソースが付いてきます。

導入方法

CSSファイルインクルード

   <link rel="stylesheet" href="/assets/tiny-date-picker-master/tiny-date-picker.css">
   <link rel="stylesheet" href="/assets/tiny-date-picker-master/date-range-picker.css">

最初に「tiny-date-picker.css」（または「tiny-date-picker.min.css」）と「date-range-picker.css」（または「date-range-picker.min.css」）の両ファイルをインクルードしてください。

JSファイルインクルード

<script src="/assets/tiny-date-picker-master/dist/date-range-picker.min.js"></script>

次にダウンロードした書庫ファイルの下にある「dist」直下のJSファイルをインクルードしてください。

DateRangePicker初期化


DateRangePicker.DateRangePicker('.cls', {
  startOpts: {},  // 開始DatePickerのオプション
  endOpts: {},    // 終了DatePickerのオプション
});

最後に「DateRangePicker」を初期化すると完了です。

第１引数DateRangePickerの表示領域のオブジェクト（セレクタ）
第２引数開始DatePickerのオプション
第３引数終了DatePickerのオプション

オプションについては「Tiny Date Picker」のオプションになります。

その他

スタイルシート

そのほかサンプルでは、カレンダーコントロール（DatePicker）が初期表示時に見えないようにクラスを定義してあります。



   <style type="text/css">

   /* Date Range の例 */
   .date-range-examples {
      max-width: 600px;
      margin: 20px auto;
      padding: 20px;
   }

   .ex-inputs {
      position: relative;
   }

   .ex-inputs-header {
      text-align: center;
      margin-bottom: 8px;
   }

   .ex-inputs-start,
   .ex-inputs-end {
      padding: 8px;
      font-size: 1em;
      border: 1px solid #CCC;
      border-radius: 2px;
   }

   .ex-inputs-start:focus,
   .ex-inputs-end:focus {
      border-color: #46A5F5;
   }

   .ex-inputs-picker {
      position: absolute;
      z-index: 1000;
      left: 50%;
      top: calc(100% + 8px);
      opacity: 0;
      z-index: -20;
      transform: translateX(-50%);
      transition: all 0.25s;
   }

   .ex-inputs-picker-visible {
      opacity: 1;
      z-index: 1000;
   }

   @media (max-width: 616px), (max-height: 480px) {
      .ex-inputs-start,
      .ex-inputs-end {
         width: 100%;
      }
   }
   </style>

Javascriptコード

また、サンプルではテキストボックスにフォーカスが当たった時の処理、外れた時の処理、また、日付が選択されたときの処理が独自に入れてあります。

         <script>
            (function () {
               const root = document.querySelector('.ex-inputs');
               const txtStart = root.querySelector('.ex-inputs-start');
               const txtEnd = root.querySelector('.ex-inputs-end');
               const container = root.querySelector('.ex-inputs-picker');

               // Inject DateRangePicker into our container
               var datePicker = DateRangePicker.DateRangePicker(container, 
                  {
                     // 開始日のオプション
                     startOpts: {
                         lang: {
                              days: ['日', '月', '火', '水', '木', '金', '土'],
                              months: [
                                  '1月',
                                  '2月',
                                  '3月',
                                  '4月',
                                  '5月',
                                  '6月',
                                  '7月',
                                  '8月',
                                  '9月',
                                  '10月',
                                  '11月',
                                  '12月',
                              ],
                              today: '今日',
                              clear: 'クリア',
                              close: '閉じる',
                         },

                        dayOffset: 1
                     },
                     endOpts: {
                         dayOffset: 1
                     } // 終了日のオプション
                  });

                  datePicker.on('statechange', function (_, rp) {
                     // テキストボックスの状態変更時呼び出される処理（日付設定処理）
                     var range = rp.state;
                     txtStart.value = range.start ? convertDateToString(range.start) : '';
                     txtEnd.value = range.end ? convertDateToString(range.end) : '';
                  });
            
               function convertDateToString(date) {
                  return date.getFullYear() + '/' + String(date.getMonth()+1).padStart(2,'0') + '/' + String(date.getDate()).padStart(2,'0');

               }

               // テキストボックスにフォーカスがあたったとき、DatePickerを表示
               txtStart.addEventListener('focus', showPicker);
               txtEnd.addEventListener('focus', showPicker);

               // DatePicker表示
               function showPicker() {
                  container.classList.add('ex-inputs-picker-visible');
               }

               // フォーカスが外れた時にはDatePickerを非表示にする
               let previousTimeout;
               root.addEventListener('focusout', function hidePicker() {
                  clearTimeout(previousTimeout);
                  previousTimeout = setTimeout(function() {
                     if (!root.contains(document.activeElement)) {
                        container.classList.remove('ex-inputs-picker-visible');
                     }
                  }, 10);
               });
            }());
         </script>

以上、ご参考前で。

関連記事