daterangepicker控件的使用

 <div class="x_panel1">
	                  
	                      <div class="row x_title">
		                  <div class="col-md-6">
		                    <h3><small>历史总览</small></h3>
		                  </div>
		                  <div class="col-md-6">
		                    <div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
		                      <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
		                      <span id="getTimes" >2011-11:11</span> <b class="caret"></b>
		                    </div>
		                  </div>
		               </div>
                  </div>

$(document).ready(function() {
     
         var cb = function(start, end, label) {
          //console.log("aammm"+start.toISOString(), end.toISOString(), label);
          
           $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
        };


        var optionSet1 = {
          startDate: moment().subtract(29, 'days'),
          endDate: moment(),
          minDate: '01/01/2010',
          maxDate: '12/31/2100',
          dateLimit: {
            days: 365
          },
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: true,
          timePickerIncrement: 1,
          timePicker24Hour: true,
          ranges: {
            '今天': [moment().startOf('day'), moment().endOf('day'),],
            '昨天': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
            '过去7天': [moment().subtract(6, 'days').startOf('week'), moment().endOf('week')],
            '过去30天': [moment().subtract(29, 'days').startOf('day'), moment().endOf('day')],
            '这个月': [moment().startOf('month'), moment().endOf('month')],
            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'MM/DD/YYYY',
          //format: 'YYYY-MM-DD HH:mm:ss',
          separator: ' to ',
          locale: {
            applyLabel: '提交',
            cancelLabel: '清除',
            fromLabel: 'From',
            toLabel: 'To',
            customRangeLabel: '自定义',
            daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            firstDay: 1
          }
        };
        
        
        $('#reportrange span').html(moment().subtract(29, 'days').format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
        $('#reportrange').daterangepicker(optionSet1, cb);
        $('#reportrange').on('show.daterangepicker', function() {
         //  console.log("show event fired");
        });
        $('#reportrange').on('hide.daterangepicker', function() {
          // console.log("hide event fired");
        });
      
        $('#reportrange').on('cancel.daterangepicker', function(ev, picker) {
         //  console.log("cancel event fired");
        });
        $('#options1').click(function() {
          $('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
        });
        $('#options2').click(function() {
          $('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
        });
        $('#destroy').click(function() {
          /* $('#reportrange').data('daterangepicker').remove(); */
        $('#reportrange').data('daterangepicker'); 
        });
     
      });
      
     
     
    </script>
  
    <!-- 日期控件设置  -->
   <script type="text/javascript">
          $(document).ready(function() {
       $('.date-picker').daterangepicker({
      singleDatePicker: false,
       timePicker: true,
       timePicker24Hour: true,
       showDropdowns:false,
       //autoUpdateInput:false,
       startDate:'00:00:00', 
       endDate:'00:00:00',
         calender_style: "picker_4",
        locale: {
            format: 'HH:mm:ss'
          },


       }, function(start, end, label) {
         console.log(start.format('HH:mm:ss'));
    });
      
      });
   
   </script>