jQuery dateRangePicker 플러그 인 사용 방법 상세 설명

$("#dateTimeRange span").html(moment().subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + moment().format('YYYY-MM-DD HH:mm')); 
  $("#dateTimeRange").daterangepicker({ 
    maxDate : moment(), //     
    dateLimit : { 
      days : 30 
    }, //          
    showDropdowns : true, 
    showWeekNumbers : false, //        
    timePicker : true, //          
    timePickerIncrement : 60, //     ，      
    timePicker12Hour : false, //    12         
    ranges : { 
      '  1  ': [moment().subtract(1, 'hours'), moment()], 
      '  ': [moment().startOf('day'), moment()], 
      '  ': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')], 
      '  7 ': [moment().subtract(6, 'days'), moment()], 
      '  30 ': [moment().subtract(29, 'days'), moment()] 
    }, 
    opens : 'right', //           
    buttonClasses : ['btn btn-default'], 
    applyClass : 'btn-small btn-primary blue', 
    cancelClass : 'btn-small', 
    locale : { 
      applyLabel : '  ', 
      cancelLabel : '  ', 
      fromLabel : '    ', 
      toLabel : '    ', 
      customRangeLabel : '   ', 
      daysOfWeek : [ ' ', ' ', ' ', ' ', ' ', ' ', ' ' ], 
      monthNames : [ '  ', '  ', '  ', '  ', '  ', '  ', 
        '  ', '  ', '  ', '  ', '   ', '   ' ], 
      firstDay : 1 
    } 
  }, function(start, end, label) { 
    //          
    $("#dateTimeRange span").html(start.subtract(1, 'hours').format('YYYY-MM-DD HH:mm') + '~' + end.format('YYYY-MM-DD HH:mm')); 
  }); 

<div class="inline"> 
      <label>   :</label> 
      <div class="date-picker form-inline-control" id="dateTimeRange"> 
        <i class="glyphicon glyphicon-calendar fa fa-calendar"></i> 
        <span id="searchDateRange"></span> 
        <b class="caret"></b> 
      </div> 
    </div>