BootStrap dateRangePicker时间范围控件

1 安装引用

1.1 下载zip

Github：

1.2 引入页面

引入样式和 JavaScript

CDN:

bootstrap.min.css:

font-awesome.min.css

jquery.min.js

bootstrap.min.js

2 使用及例子

2.1 使用

1.使用daterangepicker()为元素创建一个时间范围控件

     
          $(document).ready(function(){            $('input[name="daterange"]').daterangepicker();    });
     

2.daterangepicker()还可以有个操作对象参数和回调函数。当用户选择时间范围后调用回调函数，参数是monent时间对象的开始时间、结束时间、预定义的范围标签选择。

$('input[name="daterange"]').daterangepicker({    format: 'YYYY-MM-DD',    startDate: '2013-01-01',    endDate: '2013-12-31'},function(start, end, label) {    alert('A date range was chosen: ' +start.format('YYYY-MM-DD') + ' to ' +   end.format('YYYY-MM-DD'));});

3.操作参数

`startDate`: (Date object, moment object or string) 起始时间

`endDate`: (Date object, moment object or string) 结束时间

`minDate`: (Date object, moment object or string) 可选最早时间

`maxDate`: (Date object, moment object or string) 可选最迟时间

`timePicker`: (boolean) 是否显示time选择

`timePickerIncrement`: (number) time选择递增数

`timePicker12Hour`: (boolean) 是否12小时制

`opens`: (string: 'left'/'right') 显示在元素左边还是右边

`buttonClasses`: (array) 按钮样式

`applyClass`: (string) 应用按钮样式

`cancelClass`: (string) 取消按钮样式

`format`: (string) date/time格式

`separator`: (string) 分隔符

`locale`: (object) 本地设置

`singleDatePicker`: (boolean) 是否是单个时间选择器

`parentEl`: (string) 将控件放到哪个元素内，默认body

4.函数方法

`setOptions(object,function)`: 设置操作

`setStartDate(Date/moment/string)`:设置起始时间

`setEndDate(Date/moment/string)`:设置结束时间

例子:

//create a new daterange picker$('#daterange').daterangepicker({startDate: '2014-03-05', endDate: '2014-03-06' }); //change theselected date range of that picker$('#daterange').data('daterangepicker').setStartDate('2014-03-01');$('#daterange').data('daterangepicker').setEndDate('2014-03-31');

5.事件

`show.daterangepicker`:Triggered when the picker is shown

`hide.daterangepicker`:Triggered when the picker is hidden

`apply.daterangepicker`:Triggered when the apply button is clicked

`cancel.daterangepicker`:Triggered when the cancel button is clicked

例子：

$('#daterange').daterangepicker();$('#daterange').on('cancel.daterangepicker',function(ev, picker) {  //do something, like clearing an input  $('#daterange').val('');});$('#daterange').on('apply.daterangepicker',function(ev, picker) { 　　console.log(picker.startDate.format('YYYY-MM-DD')); 　　console.log(picker.endDate.format('YYYY-MM-DD'));});

2.2效果举例

Basic DateRange Picker
        
                
       
          
        
                   
                             
          
 
           
            
          
                   
         
        
                    
       
       
       
           $(document).ready(function() {          $('#reservation').daterangepicker(null, function(start, end, label) {                   console.log(start.toISOString(),end.toISOString(), label);          });   });   
       
      
     

 

BasicSingle Date Picker
        
                
       
          
        
                   
                             
          
 
           
            
          
                   
         
        
                    
       
      
       
           $(document).ready(function() {          $('#birthday').daterangepicker({ singleDatePicker: true },function(start, end, label) {                   console.log(start.toISOString(),end.toISOString(), label);          });   });   
       
      
     

 

 

Date Range& Time Picker with 30 Minute Increments
        
                
       
          
        
                   
         
          Choose yourcheck-in and check-out times:                   
           
           
 
            
              
             
           
 
          
         
        
                    
       
       
       
           $(document).ready(function() {          $('#reservationtime').daterangepicker({                   timePicker: true,                   timePickerIncrement: 30,                   format: 'MM/DD/YYYY h:mm A'          }, function(start, end, label) {                   console.log(start.toISOString(),end.toISOString(), label);          });   });