DateRangePicker - ダイナミックプリセットで範囲選択を組み合わせる

Question

私のフォームには、DataRangePicker JSライブラリを使用して2つの日付の範囲を選択しています。 DRPは、昨日、今日、先月などの定義済みの日付のドロップダウンメニューを持つボタンを配置する機能を提供しますが、日付入力フィールドをクリックすると元のドロップダウンウィンドウと組み合わせて使用​​したいと思います。

DPRではこれを行うことができる設定ジェネレータを提供していますが、静的な日付のみを設定できます。以来、私はmoment（）関数を使用してボタンのダイナミックレンジに変更しましたが、JSを1つの関数に結合することはできません。私はここで間違って何をしていますか？

HTML（作業）入力フィールドの

<!-- Date and time range --> 
    <div class="form-group"> 
    <label>Date and time range:</label> 

    <div class="input-group"> 
     <div class="input-group-addon"> 
     <i class="fa fa-clock-o"></i> 
     </div> 
     <input type="text" class="form-control" name="daterangepicker" id="daterangepicker" /> 
    </div> 
    <!-- /.input group --> 

     <button type="button" class="btn btn-default pull-right" name="daterange-btn" id="daterange-btn" /> 
     <span> 
      <i class="fa fa-calendar"></i> Date range picker 
     </span> 
     <i class="fa fa-caret-down"></i> 
     </button> 

    </div> 
    <!-- /.form group --> 

JSボタンの

$(function() { 
    $('input[name="daterangepicker"]').daterangepicker({ 
     alwaysShowCalendars: true, 
     showWeekNumbers: true, 
     timePicker: true, 
     timePicker24Hour: true, 
     timePickerIncrement: 30, 
     locale: { 
      format: 'DD/MM/YYYY H:mm' 
     } 
    }); 

JS（作業）入力フィールドの

$('input[name="daterange-btn"]').daterangepicker(
    { 
     ranges: { 
     'Today': [moment(), moment()], 
     'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
     'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
     'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
     'This Month': [moment().startOf('month'), moment().endOf('month')], 
     'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
     }, 
     startDate: moment().subtract(29, 'days'), 
     endDate: moment() 
    }, 
    function (start, end) { 
     $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
    } 
) 

複合JS（動作しない）

<script type="text/javascript"> 
    //Date range picker with time picker 
    $(function() { 
     $('input[name="daterangepicker"]').daterangepicker({ 
      alwaysShowCalendars: true, 
      showWeekNumbers: true, 
      timePicker: true, 
      timePicker24Hour: true, 
      timePickerIncrement: 30, 
      locale: { 
       format: 'DD/MM/YYYY H:mm' 
      }, 

      ranges: { 
       'Today': [moment(), moment()], 
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
       'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
       'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
       'This Month': [moment().startOf('month'), moment().endOf('month')], 
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
       }, 
       startDate: moment().subtract(29, 'days'), 
       endDate: moment() 
      }, 

      function (start, end) { 
       $('#daterangepicker').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
      } 
     )       
    }); 
    </script> 

Answer 1

あなたは

<script type="text/javascript"> 
    //Date range picker with time picker 
    $(function() { 
     $('input[name="daterangepicker"]').daterangepicker({ 
      alwaysShowCalendars: true, 
      showWeekNumbers: true, 
      timePicker: true, 
      timePicker24Hour: true, 
      timePickerIncrement: 30, 
      locale: { 
       format: 'DD/MM/YYYY H:mm' 
      }, 
      { // here 
       ranges: { 
        'Today': [moment(), moment()], 
        'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
        'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
        'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
        'This Month': [moment().startOf('month'), moment().endOf('month')], 
        'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
        }, 
        startDate: moment().subtract(29, 'days'), 
        endDate: moment() 
      }, 

      function (start, end) { 
       $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
      }       
    }); 
}); // here 
    </script> 

Answer 2

いくつかのブラケットと間違った場所ブラケットを欠場していたDRPの構文は特別な方法で「範囲」のオブジェクトを処理して、ブラケットを必要としませんが判明しました。 しかし、括弧を忘れていた@AKZhangに感謝します。

次のコードは、私の仕事：

<script type="text/javascript"> 
    //Date range picker with time picker 
    $(function() { 
     $('input[name="daterangepicker"]').daterangepicker({ 
      alwaysShowCalendars: true, 
      showWeekNumbers: true, 
      timePicker: true, 
      timePicker24Hour: true, 
      timePickerIncrement: 30, 
      ranges: { 
       'Today': [moment(), moment()], 
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
       'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
       'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
       'This Month': [moment().startOf('month'), moment().endOf('month')], 
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
      }, 
      startDate: moment().subtract(29, 'days'), 
      endDate: moment(), 

      locale: { 
       format: 'DD/MM/YYYY H:mm' 
      }, 

      function (start, end) { 
       $('#daterangepicker').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); 
      } 
     }); 
    }); // here 
    </script>