BootStrap dateRangePicker时间范围控件



BootStrap dateRangePicker时间范围控件

1      安装引用

1.1    下载zip

Github：https://github.com/dangrossman/bootstrap-daterangepicker/

1.2    引入页面

引入样式和
javascript

<linkhref="bootstrap.min.css" rel="stylesheet">

<linkhref="font-awesome.min.css" rel="stylesheet">

<linkrel="stylesheet" type="text/css" media="all"href="daterangepicker-bs3.css" />

<scripttype="text/javascript"src="jquery.min.js"></script>

<scripttype="text/javascript" src=" bootstrap.min.js"></script>

<scripttype="text/javascript" src="moment.js"></script>

<scripttype="text/javascript"src="daterangepicker.js"></script>

CDN:

bootstrap.min.css:

http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css

font-awesome.min.css

http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css

jquery.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js

bootstrap.min.js

2      使用及例子

2.1    使用

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

<scripttype="text/javascript">

$(document).ready(function(){

 
              $('input[name="daterange"]').daterangepicker();

});

</script>

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'));

 
}

);

操作参数

`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

函数方法

`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');

事件

`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    效果举例

<h4>Basic DateRange Picker</h4>

<divclass="well">

 

  
<formclass="form-horizontal">

        
 <fieldset>

        
 <div class="control-group">

                  
<divclass="controls">

                  
 <div class="input-prependinput-group">

                  
   <span class="add-oninput-group-addon"><i class="glyphicon glyphicon-calendar fafa-calendar"></i></span><input type="text"style="width: 200px" name="reservation"id="reservation"
class="form-control"value="03/18/2013 - 03/23/2013" />

                  
 </div>

                  
</div>

        
 </div>

        
 </fieldset>

  
</form>

 

  
<scripttype="text/javascript">

  
$(document).ready(function() {

        
 $('#reservation').daterangepicker(null, function(start, end, label) {

                  
console.log(start.toISOString(),end.toISOString(), label);

        
 });

  
});

  
</script>

</div>

 

<h4>BasicSingle Date Picker</h4>

<divclass="well">

 

  
<formclass="form-horizontal">

        
 <fieldset>

        
 <div class="control-group">

                  
<divclass="controls">

                  
 <div class="input-prependinput-group">

                  
   <span class="add-oninput-group-addon"><i class="glyphicon glyphicon-calendar fafa-calendar"></i></span><input type="text"style="width: 200px" name="birthday"id="birthday"
class="form-control"value="03/18/2013" />

                  
 </div>

                  
</div>

        
 </div>

        
 </fieldset>

  
</form>

  
<scripttype="text/javascript">

  
$(document).ready(function() {

        
 $('#birthday').daterangepicker({ singleDatePicker: true },function(start, end, label) {

                  
console.log(start.toISOString(),end.toISOString(), label);

        
 });

  
});

  
</script>

</div>

 

<h4>Date Range& Time Picker with 30 Minute Increments</h4>

<divclass="well">

  
<formclass="form-horizontal">

        
 <fieldset>

        
 <div class="control-group">

                  
<labelclass="control-label" for="reservationtime">Choose yourcheck-in and check-out times:</label>

                  
<divclass="controls">

                  
 <div class="input-prependinput-group">

                  
   <span class="add-on input-group-addon"><iclass="glyphicon glyphicon-calendar fafa-calendar"></i></span>

                  
   <input type="text"style="width: 400px" name="reservation"id="reservationtime" class="form-control"value="08/01/2013 1:00 PM - 08/01/2013 1:30 PM" 
class="span4"/>

                  
 </div>

                  
</div>

        
 </div>

        
 </fieldset>

  
</form>

 

  
<scripttype="text/javascript">

  
$(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);

        
 });

  
});

  
</script>

</div>