一、简介
上文中我们谈到了时间选择器，但是我们如果需要输入一个时间段呢，所以本文介绍了另一个大杀器 bootstrap-daterangepicker。
我们先来看涨预览图：
二、依赖
除了常规的 BootStrap 相关依赖，我们还需要引入 daterangepicker 相关的依赖。
样式文件：
<link rel="stylesheet" href="daterangepicker/daterangepicker.css" />
js:
<script src="daterangepicker/moment.js"></script> <script src="daterangepicker/daterangepicker.js"></script>
三、简单Demo
要知道，BootStrap 可是为我们初始化了最基本的使用样式，我们只需简单加入样式 form_daterange 即可。
<div class="input-group inputBlank"> <span class="input-group-addon">时间区间</span> <input name="startDate" type="text" readonly="true" class="form-control date form_daterange"/> </div>
效果可以见本文开头的图片，已满足基本使用。
当然，如果你希望得到进一步的使用，那么你需要进行如下的初始化。
<div class="input-group inputBlank" > <input type="text" class="form-control date-picker" id="dateTimeRange" value="" /> <span class="input-group-addon"> <i class="fa fa-calendar bigger-110"></i> </span> </div>
（注：上面引用了一个三方的常用的图标库，详见：http://fontawesome.io/icons/）
初始化：
$(function () {
$('#dateTimeRange').daterangepicker({
applyClass : 'btn-sm btn-success',
cancelClass : 'btn-sm btn-default',
locale: {
applyLabel: '确认',
cancelLabel: '取消',
fromLabel : '起始时间',
toLabel : '结束时间',
customRangeLabel : '自定义',
firstDay : 1
},
ranges : {
//'最近1小时': [moment().subtract('hours',1), moment()],
// '今日': [moment().startOf('day'), moment()],
// '昨日': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
// '最近7日': [moment().subtract('days', 6), moment()],
'最近30日': [moment().subtract('days', 29), moment()],
'本月': [moment().startOf("month"),moment().endOf("month")],
'上个月': [moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")],
'本季度': [moment().startOf("quarter"),moment().endOf("quarter")],
'上季度': [moment().subtract(1,"quarter").startOf("quarter"),moment().subtract(1,"quarter").endOf("quarter")],
'本年度': [moment().startOf("year"),moment().endOf("year")],
'上年度': [moment().subtract(1,"year").startOf("year"),moment().subtract(1,"year").endOf("year")]
},
opens : 'right', // 日期选择框的弹出位置
separator : ' 至 ',
showWeekNumbers : true, // 是否显示第几周
//timePicker: true,
//timePickerIncrement : 10, // 时间的增量，单位为分钟
//timePicker12Hour : false, // 是否使用12小时制来显示时间
//maxDate : moment(), // 最大时间
format: 'YYYY-MM-DD'
}, function(start, end, label) { // 格式化日期显示框
$('#beginTime').val(start.format('YYYY-MM-DD'));
$('#endTime').val(end.format('YYYY-MM-DD'));
})
.next().on('click', function(){
$(this).prev().focus();
});
})效果预览：
好了，最后还是惯例，贴上点官方的文档之类的资源。
官方文档：http://www.daterangepicker.com/
另外，提供一个在线的 css 和 js 引用：http://www.bootcdn.cn/bootstrap-daterangepicker/
文章评论