在jsp页面中怎样实现如上图所示的,通过时间选择框来查询某一段时间的业务记录呢,下面将我的一点小经验分享给大家。这里的时间选择框使用的是My97DatePicker的js插件,可以在其官网下载http://www.my97.net/,官网上也有相关的使用方法介绍。
在这里,我们首先需要在在页面<head>标签中引入使用的WdatePicker.js文件,然后在<body>标签中插入两个<div>标签,分别在每个<div>中插入一个<input>标签,如下所示
<div class="cell" style="width: 126px;">
<input type="text" class="Wdate" id="d1" name="startTime" value="<%=request.getParameter("startTime")==null?"":request.getParameter("startTime")%>" onFocus="var d2=$dp.$('d2');WdatePicker({onpicked:function(){d2.focus();},maxDate:'#F{$dp.$D(\'d2\')}'})" />
</div>
至
<div class="cell" style="width: 126px;">
<input type="text" class="Wdate" id="d2" name="endTime" value="<%=request.getParameter("endTime")==null?"":request.getParameter("endTime")%>" onFocus="WdatePicker({minDate:'#F{$dp.$D(\'d1\')}'})"/>
</div>
<div class="cell" style="width: 200px;margin-left: 33px;">
<input class="list_btn" value="查询" type="submit" />
</div>
这里我们使用的WdatePicker插件实现的效果为:在第一个时间选择框中选择时间startTime后,第二个时间选择框会自动弹出,同时,可选择的时间endTime满足endTime>=startTime.当然大家也可以根据自己的实际需要,选择不同的效果,可在http://www.my97.net/dp/demo/index.htm查看演示效果。
这里的value之所以用这种方式来获得,是因为实现点击“查询”按钮,获得相关数据信息的同时页面会自动刷新,刷新后,<input>标签中的值会清空,而一般来说,点击查询后,时间应该保留显示,以提醒使用人员查询的是什么时间段的数据,所以这里就采用这种方式。
选择了时间后,我们需要在后台获取时间进行相关处理,在这里就不贴出后台代码了。在很多时候,由于时间久了数据量会很大,于是就会有快速查询短时间内数据的需要,就像网银中有查看当天或者一周、一个月的交易记录的功能,这里实现的思路就是通过点击相关的快速查询链接,触发一系列动作,即首先改变时间输入框中d1和d2的值,然后触发submit按钮,这里我们通过js函数来实现这种效果。
首先,对于“今天”来说,我们需要自动获取系统当前时间,并将其赋值给“d1”和“d2”,由于获取的系统时间精确到秒,而我们这里只需要精确到天,因此需要对时间进行格式转换;其次,对于“一周”和“三十天”来说,实现的思路是,首先将当前系统时间经过格式转换后,赋值给“d2”,然后再分别将转换后的系统时间减去6天和29天赋值给“d1”即可。主要通过下面的JavaScript代码实现:
// 对Date的扩展,将 Date 转化为指定格式的String
// 例子:
// (new Date()).Format("yyyy-MM-dd hh:mm:ss") ==> 2014-03-02 08:09:04
// (new Date()).Format("yyyy-MM-dd ") ==> 2014-03-02
Date.prototype.Format = function(fmt) {
var o = {
"M+" : this.getMonth() + 1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth() + 3) / 3), //季度
"S" : this.getMilliseconds()//毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
for ( var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt
.replace(
RegExp.$1,
(RegExp.$1.length == 1) ? (o[k])
: (("00" + o[k])
.substr(("" + o[k]).length)));
return fmt;
}
//获取当前日期,并进行格式化
var time = new Date().Format("yyyy-MM-dd");
//对日期进行加减
function addDate(date, days) {
var d = new Date(date);
d.setDate(d.getDate() + days);
var m = d.getMonth() + 1;
return d.getFullYear() + '-' + m + '-' + d.getDate();
}
//其中,date参数是要进行加减的日期,days参数是要加减的天数,如果往前算就传入负数,往后算就传入正数,如果是要进行月份的加减,就调用setMonth()和getMonth()就可以了,需要注意的是返回的月份是从0开始计算的,也就是说返回的月份要比实际月份少一个月,因此要相应的加上1。
//“今天”日期设置
function today() {
document.getElementById("d1").value = time;
document.getElementById("d2").value = time;
document.getElementById("myform").submit();
}
//“一周”日期设置
function week() {
document.getElementById("d1").value = addDate(time, -6);
document.getElementById("d2").value = time;
document.getElementById("myform").submit();
}
//“三十天”日期设置
function month() {
document.getElementById("d1").value = addDate(time, -29);
document.getElementById("d2").value = time;
document.getElementById("myform").submit();
}
jsp页面调用如下所示:
<div class="cell" >
<a href="#" οnclick="today()" style="text-decoration:underline;">今天</a>
</div>
<div class="cell">
<a href="#" οnclick="week()" style="text-decoration:underline;">一周</a>
</div>
<div class="cell">
<a href="#" οnclick="month()" style="text-decoration:underline;">三十天</a>
</div>
在这里,控制页面显示的css代码就不贴出来了,因为实在很简单,之所以把它发布出来,一是与大家分享学习中的小经验,同时也是备份,相信后面的学习中应该还会用到这些的。