日期选择器的使用
2015-07-06 09:41
204 查看
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");
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");
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- shell中$0,$?,$!等的特殊用法
- Android的Activity切换动画特效库SwitchLayout，视图切换动画库，媲美IOS
- 网络模拟器WANem的使用
- ubuntu 开启nfs服务
- Spark集群基于Zookeeper的HA搭建部署笔记
- MySql连接报错1045
- 关于mysql对字符串的数字的排序
- 开始折腾Ubuntu 14.04 下的GVIM
- Hibernate之HQL总结
- appledoc生成文档
- Android Handler
- MySQL和MSSQL下，text 、ntext、 image、blob的比较
- C++中关于输入输出流中c_str
- C#注册表操作汇总
- [Objective-C] 不建议使用点语法糖
- 谁是网络文学搅局者不重要，IP能不能变现还没闹明白呢
- Python中的迭代器和生成器
- Android中View的生命周期
- java判断ip是否在同一个网段上
- iOS 9_适配