ChargeList.jsp
1.导入js文件:
<head>
<link href="<%=request.getContextPath()%>/manage/Css/bootstrap.css" rel="stylesheet" media="screen">
<%-- <link href="<%=request.getContextPath()%>/manage/Css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen"> --%>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/datepicker/datetimepicker.css" />
<link rel="stylesheet" type="text/css"
href="<%=request.getContextPath()%>/manage/Css/style.css" />
<title>查询</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/manage/Js/jquery.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/manage/Js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/datepicker/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/datepicker/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/manage/Js/jquery.validate.min.js"></script>
<script type="text/javascript"
src="<%=request.getContextPath()%>/manage/Js/common.js"></script>
</head>
2.日期输入框:
<tr>
<td width="10%" class="tableleft"> 开始日期:</td>
<td>
<div id="date-begin"
class="input-append date form_date queryComponent"
data-link-field="dtp_input1" data-date-format="yyyy-mm-dd"
data-date="" data-startDate="${startTime }">
<input name="query1" id="query1" size="16" type="text"
value="${startTime }" readonly=""> <span class="add-on"><i
class="icon-remove"></i></span> <span class="add-on"><i
class="icon-calendar"></i></span>
</div>
</td>
<td width="10%" class="tableleft"> 结束日期:</td>
<td>
<div id="date-end"
class="input-append date form_date queryComponent"
data-link-field="dtp_input2" data-date-format="yyyy-mm-dd"
data-date="" data-endDate="${endTime }">
<input name="query2" id="query2" size="16" type="text"
value="${endTime }" readonly=""> <span class="add-on"><i
class="icon-remove"></i></span> <span class="add-on"><i
class="icon-calendar"></i></span>
</div>
</td>
</tr>
3.Script校验脚本:
<script>
$("#table_validate").validate({
rules:{
query1:{
maxlength: 64,
},
query2:{
maxlength: 64,
},
query3:{
maxlength: 11,
minlength: 11,
digits: true
},
}
});
$('#date-begin').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
endDate: $('#date-end').attr('data-endDate')||new Date()
}).on('changeDate', function(ev){
if(ev.date){
//ev.date.setHours(ev.date.getHours()-8)
var chooseDate =new Date($(this).find('input[type="text"]').val())
var currentYear = chooseDate.getFullYear();
var currentMonth = chooseDate.getMonth()+1;
var currentDate = chooseDate.getDate();
if(this.id=="date-begin"){
$('.form_date').not('#'+this.id).datetimepicker('setStartDate',currentYear+'-'+ currentMonth +'-' + currentDate).datetimepicker('setEndDate',new Date())
}else{
$('#date-begin').datetimepicker('setStartDate',null).datetimepicker('setEndDate', currentYear+'-'+ currentMonth +'-' + currentDate)
}
}
});
$('#date-end').datetimepicker({
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
startDate: $('#date-begin').attr('data-startDate')||null,
endDate: new Date()
}).on('changeDate', function(ev){
if(ev.date){
//ev.date.setHours(ev.date.getHours()-8)
var chooseDate =new Date($(this).find('input[type="text"]').val())
var currentYear = chooseDate.getFullYear();
var currentMonth = chooseDate.getMonth()+1;
var currentDate = chooseDate.getDate();
if(this.id=="date-begin"){
$('.form_date').not('#'+this.id).datetimepicker('setStartDate',currentYear+'-'+ currentMonth +'-' + currentDate).datetimepicker('setEndDate',new Date())
}else{
$('#date-begin').datetimepicker('setStartDate',null).datetimepicker('setEndDate', currentYear+'-'+ currentMonth +'-' + currentDate)
}
}
})
</script>
</body>
</html>
后台处理:
String phone = null;
String startTime = null;
String endTime = null;
String status = null;
startTime = CharacterUtil.getStringFromRequest(request, "query1");
endTime = CharacterUtil.getStringFromRequest(request, "query2");
phone = CharacterUtil.getStringFromRequest(request, "query3");
status = CharacterUtil.getStringFromRequest(request, "query4");