时间段插件daterangepicker —— 基本使用及回显问题解决方法

本文主要是介绍时间段插件daterangepicker —— 基本使用及回显问题解决方法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前段时间项目中有功能需要根据时间段查询结果，于是使用了bootstrap-daterangepicker这个时间段选择插件，通过jquery来调用。网上关于这个插件的介绍比较少，就根据自己的使用情况写下自己的使用方法，有不完善的地方还希望朋友们批评指正。

1、介绍

这个日期范围选择器组件引导创建一个下拉菜单，用户可以选择一个日期范围。

daterangepicker插件官网地址 github地址

给需要进行选择的input绑定该插件后，官方效果如图所示。

2、使用

基本使用流程就是引入插件相关的js——为元素绑定插件——调用。

用到的js和css（可以在上面提供的github地址里面下载插件）

daterangepicker.js

daterangepicker-bs3.css

moment.min.js（这个很容易忘记）

jquery.dateRange.js（项目里很多地方用到了这个插件，自己封装的通用js）

html部分

<html lang="zh-CN"><head><%@ include file="/WEB-INF/views/common/head.jsp" %><script src="${_jsPath}/moment.js"></script><script src="${_jsPath}/jquery.dateRange.js"></script><script src="${_pluginPath}/datetimepicker/moment.min.js"></script><script src="${_pluginPath}/datetimepicker/daterangepicker.js"></script><link rel="stylesheet" href="${_pluginPath}/datetimepicker/daterangepicker-bs3.css" /></head><body><div><ul>//省略代码		<li class="query-form-item"><label class="query-form-item-name" class="query-form-item-name" for="schdDate">计划时间:</label><input class="common-input common-input-middle" id="createDate" name="createDate"  readonly="true" placeholder="点击选择时间段"//><input type="hidden"  id="operDateBegin" name="operDateBegin" value="${operDateBegin}" /><input type="hidden"  id="operDateEnd" name="operDateEnd" value="${operDateEnd}" /></li></ul>	</div>//省略代码</body>
</html>

省略了不相干的代码，另：id ="operDateBegin" 和 id= "operDateEnd"是为了前台回显展示方便，可以选择别的方式。
js部分（query.dateRange.js）

//页面引入daterangepicker
$(function(){//date//初始化插件$("#createDate").daterangepicker({format: 'YYYY-MM-DD',startDate:get2MonthBefore(),endDate: new Date(),maxDate:'2050-12-30',locale:{applyLabel: '确认',cancelLabel: '取消',fromLabel: '从',toLabel: '到',weekLabel: 'W',customRangeLabel: '选择时间',daysOfWeek:["日","一","二","三","四","五","六"],monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],},range: {"近期": ['2015-04-12',new Date()]}}, function (start, end, label) {//alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));} );//在查询后的页面回显选择的日期范围var begin = $("#operDateBegin").val();var end = $("#operDateEnd").val();if (begin != ("") && end != ("")) {$("#createDate").val(begin+" 至 "+end);}
});
//获取距今两个月前的日期
function get2MonthBefore(){var resultDate,year,month,date,hms;var currDate = new Date();year = currDate.getFullYear();month = currDate.getMonth()+1;date = currDate.getDate();hms = currDate.getHours() + ':' + currDate.getMinutes() + ':' + (currDate.getSeconds() < 10 ? '0'+currDate.getSeconds() : currDate.getSeconds());switch(month){case 1:case 2:month += 10;year--;break;case 4: //2月最大天数设为28if(date > 28) date = 28;default:month -= 2;break;}month = (month < 10) ? ('0' + month) : month;resultDate = year + '-'+month+'-'+date+' ' + hms;return resultDate;
}

这个项目里面，我使用的初始化的结束时间是当前日期，开始时间选择使用和当前时间相距两个月的日期
其他有想改的地方，可以根据自己的需要参考官方网站的这个模块。

在查询后的页面再次点击该插件效果如图

虽然查询结果正常，但是使用起来有点不方便。
从图中可以看出来，input的value与插件中的时间是不一致的。插件在页面重新加载后再次初始化了，而理想情况是与上面input的value值一直，显示用户点击查询时选择的时间段。
查看daterangepicker.js的源码，发现DateRangePicker.prototype里面有相应的setStartDate和setEndDate

于是在查询重新加载后，查询绑定的元素值是否为空，不为空调用上面的方法修改插件的时间范围即可。
我这里为了方便使用了隐藏域。分别保存了startDate和endDate

//页面引入daterangepicker
$(function(){//date$("#createDate").daterangepicker({format: 'YYYY-MM-DD',startDate:get2MonthBefore(),endDate: new Date(),maxDate:'2050-12-30',locale:{applyLabel: '确认',cancelLabel: '取消',fromLabel: '从',toLabel: '到',weekLabel: 'W',customRangeLabel: '选择时间',daysOfWeek:["日","一","二","三","四","五","六"],monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],},range: {"近期": ['2015-04-12',new Date()]}}, function (start, end, label) {} );var begin = $("#operDateBegin").val();var end = $("#operDateEnd").val();if (begin != ("") && end != ("")) {$("#createDate").val(begin+" 至 "+end);$('#createDate').data('daterangepicker').setStartDate(begin);$('#createDate').data('daterangepicker').setEndDate(end);}
});function get2MonthBefore(){//省略代码
}

效果如图