最好用的日期范围选择组件：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>

1. 外层div上增加daterange class。
2. 一个普通的input标签。
3. 一个日历的i标签。

三、内部封装

首先是js。

再来看css。

本文作者：首席执行官（沉默王二）

本文编辑：首席执行官（沉默王二）