我们在开发过程中经常有时间区间的要求,在多次"失败"及翻阅资料之后终于找到了适合我的方法,所以给大家分享出来.
基本需求为可以设置时间,设置时间区间,后一时间日期不可提前于前一时间日期.
需要引入:bootstrap-datepicker.js 和 bootstrap-datepicker.css (bootstrap-datepicker文件可从此链接下载:http://www.bootcss.com/p/bootstrap-datetimepicker/)
以及bootstrap的js和css...就自行下载引入吧.
其中日期的参数配置可以参考:http://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#methods
接下来就可以去编写代码了↓↓↓
首先是jsp代码:
1) 时间区间开始:
<tr>
<td><span class = "han"><center>执行开始日期：</center></span></td>
<td>
<div class = "input-append date form_datetime">
<input type="text" class = "m-wrap span3" readonly placeholder="开始日期" name = "startdate" value = "${spread.startdate }" id = "starttime" data-date-format="yyyy-mm-dd" size = "16"><span class = "add-on"><i class = "icon-calendar"></i></span>
</div>
</td>
</tr>
2) 时间区间结束
<tr>
<td><span class = "han"><center>维护结束日期：</center></span></td>
<td>
<div class = "input-append date form_datetime">
<input type="text" class = "m-wrap span3" readonly placeholder="结束日期" name = "enddate" value = "${spread.enddate }" id = "endtime" data-date-format="yyyy-mm-dd" size = "16"><span class = "add-on"><i class = "icon-calendar"></i></span>
</div>
</td>
</tr>
以上为jsp代码,其中样式可以自己去设置,接下来是<script>代码
/* 时间区间开始 */
$(function(){
$("#starttime").datetimepicker({
format:"yyyy-mm-dd",
showMeridian:true,
autoclose:true,
language:'en',
pickDate:true,
minView:2,
pickTime:true,
todayBtn:true
}).on('changeDate',function(ev){
var starttime=$('#starttime').val();
$('#endtime').datetimepicker('setStartDate',starttime);
$('#starttime').datetimepicker('hide');
});
$("#endtime").datetimepicker({
format:"yyyy-mm-dd",
showMeridian:true,
minView:2,
autoclose:true,
todayBth:true
}).on('chengeDate',function(ev){
var starttime=$('#starttime').val();
var endtime = $('#endtime').val();
if(starttime!=""&&endtime!=""){
if(!checkEndTime(starttime,endtime)){
$('#endtime').val('');
alert("开始时间要大于结束时间！");
return;
}
}
$('#starttime').datetimepicker('setEndDate',endtime);
$('#starttime').datetimepicker('hide');
});
$('#starttime').datetimepicker('setEndDate',getCurentTime());
$('#endtime').datetimepicker('setStartDate',getCurentTime());
$('#starttime').val(getCurenTime());
$('#endtime').val(getCurenTime());
});
/* 时间区间结束 */
其中的参数可以根据自己的需求去更改.如写完没效果的话可以将<script>移入代码最下边.
参数配置可以参考:http://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#methods