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