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'));
});
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效果举例