bootstrap-daterangepicker：最好用的日期范围选择组件

嗯，在我还没有发现bootstrap-daterangepicker组件时，

在页面需要选择日期范围时，我是傻乎乎的创建两个日期组件。

现在想想，以前的low劲真是不可忍呐！

零、效果展示

现在是这样的：



以前是这样的：



不比不知道，一比高下立断。

一、源码下载

Date Range Picker for Bootstrap

注意要依赖Bootstrap, jQuery and Moment.js。

Date Range Picker relies on Bootstrap, jQuery and Moment.js. Include the required scripts and stylesheet in your page.

二、使用方法

<div class="form-group daterange">
<label>下单时间：</label>
<input class="form-control" name="range_date" type="text">
<i class="fa fa-calendar"></i>
</div>

外层div上增加daterange class。

一个普通的input标签。

一个日历的i标签。

如此就好。

三、内部封装

首先是js。

$(function() {
$(".daterange input").each(function() {
var $this = $(this);

$this.daterangepicker({
locale : {
"format" : "YYYY-MM-DD",// 显示格式
"separator" : " / ",// 两个日期之间的分割线
// 中文化
"applyLabel" : "确定",
"cancelLabel" : "取消",
"fromLabel" : "开始",
"toLabel" : "结束",
"daysOfWeek" : [ "日", "一", "二", "三", "四", "五", "六" ],
"monthNames" : [ "一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
"firstDay" : 1
},
}, function(start, end, label) {
// 点击确定后的事件，下面是为了bootstrap validate得校验，
// 若未使用，可忽视
if ($this.parents("form.required-validate").length > 0) {
var $form = $this.parents("form.required-validate");

var name = $this.attr("name");
if ($form.length > 0) {
var data = $form.data('bootstrapValidator');
data.updateStatus(name, 'NOT_VALIDATED', null)
// Validate the field
.validateField(name);
}
}
// 设置最小宽度，否则显示不全
}).css("min-width", "210px").next("i").click(function() {
// 对日期的i标签增加click事件，使其在鼠标点击时可以拉出日期选择
$(this).parent().find('input').click();
});
});
});

再来看css。

/* 定位i标签在input标签内 */
.daterange i {
position: absolute;
bottom: 10px;
right: 14px;
top: auto;
cursor: pointer;
}
.daterange {
position: relative;
}
/* daterange i end */

沉默王二公众号正在招募原创团队（写作、朗读），我们目前已有9人，期待你的加入！