DateRangePicker - 동적 사전 설정으로 범위 선택 결합

Question

DataRangePicker JS 라이브러리를 내 양식에 사용하여 두 날짜 범위를 선택합니다. DRP는 어제, 오늘, 지난 달 등과 같이 사전 정의 된 날짜의 드롭 다운 메뉴가있는 단추를 배치하는 기능을 제공하지만 날짜 입력 필드를 클릭하면 원래의 드롭 다운 창과 결합하여이 기능을 사용하고 싶습니다. .

DPR에서는이를 수행 할 수있는 설정 생성기를 제공하지만 정적 날짜 만 설정할 수 있습니다. 이후로는 moment() 함수를 사용하여 단추의 동적 범위로 변경했지만 JS를 하나의 함수로 결합 할 수는 없습니다. 여기서 내가 뭘 잘못하고 있니?

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>