bootstrap时间区间设置方法

我们在开发过程中经常有时间区间的要求,在多次"失败"及翻阅资料之后终于找到了适合我的方法,所以给大家分享出来.

　　基本需求为可以设置时间,设置时间区间,后一时间日期不可提前于前一时间日期.

　　需要引入: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