bootstrap 时间范围组件_BootStrap dateRangePicker时间范围控件

BootStrap dateRangePicker时间范围控件

1 安装引用

1.1 下载zip

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