BootStrap使用之时间控件（2）

BootStrap 除了经典的时间点输入控件（datetimepicker），还有实用的时间段输出控件，本文主要介绍 daterangepicker。

一、简介

上文中我们谈到了时间选择器，但是我们如果需要输入一个时间段呢，所以本文介绍了另一个大杀器 bootstrap-daterangepicker。

我们先来看涨预览图：

</p>

二、依赖

除了常规的 BootStrap 相关依赖，我们还需要引入 daterangepicker 相关的依赖。

样式文件：

1	<link rel="stylesheet" href="daterangepicker/daterangepicker.css" />

js:

1 2	<script src="daterangepicker/moment.js"></script> <script src="daterangepicker/daterangepicker.js"></script>

三、简单Demo

要知道，BootStrap 可是为我们初始化了最基本的使用样式，我们只需简单加入样式 form_daterange 即可。

<div&nbsp;class="input-group&nbsp;inputBlank">
&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="input-group-addon">时间区间</span>
&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;name="startDate"&nbsp;type="text"&nbsp;readonly="true"&nbsp;&nbsp;class="form-control&nbsp;date&nbsp;form_daterange"/>
</div>

效果可以见本文开头的图片，已满足基本使用。

当然，如果你希望得到进一步的使用，那么你需要进行如下的初始化。

<div&nbsp;class="input-group&nbsp;inputBlank"&nbsp;>
&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;class="form-control&nbsp;date-picker"&nbsp;id="dateTimeRange"&nbsp;value=""&nbsp;/>
&nbsp;&nbsp;&nbsp;&nbsp;<span&nbsp;class="input-group-addon">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i&nbsp;class="fa&nbsp;fa-calendar&nbsp;bigger-110"></i>
&nbsp;&nbsp;&nbsp;&nbsp;</span>
</div>

（注：上面引用了一个三方的常用的图标库，详见：http://fontawesome.io/icons/）

初始化：

$(function&nbsp;()&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#dateTimeRange&#39;).daterangepicker({
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;applyClass&nbsp;:&nbsp;&#39;btn-sm&nbsp;btn-success&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cancelClass&nbsp;:&nbsp;&#39;btn-sm&nbsp;btn-default&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;locale:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;applyLabel:&nbsp;&#39;确认&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cancelLabel:&nbsp;&#39;取消&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fromLabel&nbsp;:&nbsp;&#39;起始时间&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;toLabel&nbsp;:&nbsp;&#39;结束时间&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;customRangeLabel&nbsp;:&nbsp;&#39;自定义&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstDay&nbsp;:&nbsp;1
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ranges&nbsp;:&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&#39;最近1小时&#39;:&nbsp;[moment().subtract(&#39;hours&#39;,1),&nbsp;moment()],
//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;今日&#39;:&nbsp;[moment().startOf(&#39;day&#39;),&nbsp;moment()],
//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;昨日&#39;:&nbsp;[moment().subtract(&#39;days&#39;,&nbsp;1).startOf(&#39;day&#39;),&nbsp;moment().subtract(&#39;days&#39;,&nbsp;1).endOf(&#39;day&#39;)],
//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;最近7日&#39;:&nbsp;[moment().subtract(&#39;days&#39;,&nbsp;6),&nbsp;moment()],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;最近30日&#39;:&nbsp;[moment().subtract(&#39;days&#39;,&nbsp;29),&nbsp;moment()],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;本月&#39;:&nbsp;[moment().startOf("month"),moment().endOf("month")],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;上个月&#39;:&nbsp;[moment().subtract(1,"month").startOf("month"),moment().subtract(1,"month").endOf("month")],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;本季度&#39;:&nbsp;[moment().startOf("quarter"),moment().endOf("quarter")],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;上季度&#39;:&nbsp;[moment().subtract(1,"quarter").startOf("quarter"),moment().subtract(1,"quarter").endOf("quarter")],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;本年度&#39;:&nbsp;[moment().startOf("year"),moment().endOf("year")],
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#39;上年度&#39;:&nbsp;[moment().subtract(1,"year").startOf("year"),moment().subtract(1,"year").endOf("year")]
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opens&nbsp;:&nbsp;&#39;right&#39;,&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;日期选择框的弹出位置
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;separator&nbsp;:&nbsp;&#39;&nbsp;至&nbsp;&#39;,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showWeekNumbers&nbsp;:&nbsp;true,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;是否显示第几周
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//timePicker:&nbsp;true,
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//timePickerIncrement&nbsp;:&nbsp;10,&nbsp;//&nbsp;时间的增量，单位为分钟
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//timePicker12Hour&nbsp;:&nbsp;false,&nbsp;//&nbsp;是否使用12小时制来显示时间
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//maxDate&nbsp;:&nbsp;moment(),&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;最大时间
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;format:&nbsp;&#39;YYYY-MM-DD&#39;
&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;function(start,&nbsp;end,&nbsp;label)&nbsp;{&nbsp;//&nbsp;格式化日期显示框
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#beginTime&#39;).val(start.format(&#39;YYYY-MM-DD&#39;));
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(&#39;#endTime&#39;).val(end.format(&#39;YYYY-MM-DD&#39;));
&nbsp;&nbsp;&nbsp;&nbsp;})
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.next().on(&#39;click&#39;,&nbsp;function(){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).prev().focus();
&nbsp;&nbsp;&nbsp;&nbsp;});
})

效果预览：

好了，最后还是惯例，贴上点官方的文档之类的资源。

官方文档：http://www.daterangepicker.com/

另外，提供一个在线的 css 和 js 引用：http://www.bootcdn.cn/bootstrap-daterangepicker/