用JSP制作的日期选择器
2002-11-27 18:40
295 查看
我们在做web应用的时候，在很多情况下都需要操作人员在页面上输入日期之类的日期型字段信息。通常的做法是：
1、用SELECT标签分别选择年月日
2、给一个INPUT，并定义一个固定的格式，让操作人员自己填写
3、使用MICROSOFT提供的ACTIVEX DATETIMECONTROLLER。
然而这中方法均有缺陷，在1中虽然不会出现一些离谱的数据（如99月88日），但有效性验证和后台数据处理将消耗我们不少的时间和精力。而且一个操作页面如果有较多个日期型字段，一定会给使用者带来困扰。在2中用户可以任意录入年月日，一定会出现离谱的数据也存在有效性验证和后台处理等问题。MICROSOFT的ACTIVEX DATETIMECONTROLLER是个好东西，不过它的CLSID“又长又臭”很难记住 ，还有很多参数需要设置。如果对MICROSOFT的东西不了解，使用起来也方便不到哪儿去。再说不一定每个人的机器上都安装了这个ACTIVEX控件。但是我在做这个日期选择器的时候它给了我不小的启发。下面是我在测试这个日期选择器的一些画面。
1．日期选择前
2.日期选择中
3.日期选择后
结合给出的页面我简单的介绍一下使用方法，做一个需要输入日期数据的页面（见图：日期选择前）在点击确定按钮（如果将确定按钮换成一个小图标效果会更好，愿意动手的可以试一试）的时候会弹出jsp日期选择器。我们可以用画面（见图：日期选择中）中提供的按钮来前后翻，也可以从下拉框中直接选择。月份选择有循环滚动功能给，即1月的前一个月是12月，12月的后一个月是1月，但不提供逢1月（前一月）和12月（后一月）时的年份的变化。如果有需要可以自己在源代码上修改，估计也就是4行的工作两。年份我设置在1970－2470之间。如果有需要，请自己动手修改吧。JSP日期选择器的另一个特点时与星期的对齐是与日常使用的日历对应的。选择后的结果如图“日期选择后” 。不足之处是脱离了WEB SERVER不能使用。
下面给出源代码：
1、testCalendar.jsp的源代码
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
testCalendar
</title>
<script language="JavaScript">
var calDateFiled="";
var inDate="";
function setDateField(dateField)
{
calDateField = dateField;
inDate = dateField.value;
}
function myGetDate(selectedDate)
{
calDateField.value = selectedDate;
calDateField.focus();
}
</script>
</head>
<body>
<form name="abc">
日期:<input type="text" name="indate" readOnly>
<input type="button" name="ok" value="确定" onClick="setDateField(document.abc.indate);tempstr=window.open('IECalendar.jsp','tony','dependent=yes,titlebar=no,width=465,height=275,location=no');tempstr.moveTo((screen.height-275)/2,(screen.width-475)/2);">
</form>
</body>
</html>
2、IECalendar.jsp的源代码
<%@ page contentType="text/html; charset=GB2312" %>
<%@ page import="java.util.Calendar" %>
<%@ page import="java.util.GregorianCalendar" %>
<%@ page import="java.util.Date" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="images/style.css" type="text/css">
<title>
IECalendar
</title>
<script language="JavaScript" >
var daystr="1";
function selectdate()
{
document.all.calendar.submit();
}
function premonth()
{
if(parseInt(document.all.month.value)==1)
{
window.location="IECalendar.jsp?year="+document.all.year.value+"&month=12";
}
else
{
window.location="IECalendar.jsp?year="+document.all.year.value+"&month="+(parseInt(document.all.month.value)-1)%12;
}
}
function nextmonth()
{
if(parseInt(document.all.month.value)==11)
{
window.location="IECalendar.jsp?year="+document.all.year.value+"&month=12";
}
else
{
window.location="IECalendar.jsp?year="+document.all.year.value+"&month="+(parseInt(document.all.month.value)+1)%12;
}
}
function preyear()
{
if(parseInt(document.all.year.value)==1970)
{
return;
}
else
{
window.location="IECalendar.jsp?year="+(parseInt(document.all.year.value)-1)+"&month="+parseInt(document.all.month.value);
}
}
function nextyear()
{
if(parseInt(document.all.year.value)==2470)
{
return;
}
else
{
window.location="IECalendar.jsp?year="+(parseInt(document.all.year.value)+1)+"&month="+parseInt(document.all.month.value);
}
}
function getday()
{
return daystr;
}
</script>
</head>
<%
int year=0;
int month=0;
int day=1;
Date now=new Date();
Calendar calendar=new GregorianCalendar();
calendar.setTime(now);
if((request.getParameter("year")!=null))
{
if((!request.getParameter("year").equals(""))||(!request.getParameter("year").trim().equals("")))
{
year=Integer.parseInt(request.getParameter("year"));
}
else
{
year=calendar.get(calendar.YEAR);
}
}
else
{
year=calendar.get(calendar.YEAR);
}
if((request.getParameter("month")!=null))
{
if((!request.getParameter("month").equals(""))||(!request.getParameter("month").trim().equals("")))
{
month=Integer.parseInt(request.getParameter("month"));
}
else
{
month=Integer.parseInt(request.getParameter("month"));
}
}
else
{
month=calendar.get(calendar.MONTH)+1;
}
// if((request.getParameter("day")!=null))
// {
// if((!request.getParameter("day").equals(""))||(!request.getParameter("day").trim().equals("")))
// {
// day=Integer.parseInt(request.getParameter("day"));
// }
// else
// {
// day=Integer.parseInt(request.getParameter("day"));
// }
// }
// else
// {
// day=calendar.get(calendar.DAY_OF_MONTH);
// }
%>
<body topmargin="5">
<center>
<form action="" name="calendar">
<table border="1" width="450" cellspacing="0" cellpadding="1" bordercolordark="#FFFFFF" bordercolorlight="#000000" style="font-size: 12px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 0px">
<tr bgcolor="#9370DB">
<td width="100"><font color="#F0F8FF" size="3"> <b>月 份</b> </font></td>
<td>
<select name="month" style="width:125" onchange="document.all.calendar.submit();">
<%
for(int i=1;i<=12;i++)
{
%>
<option value="<%=i%>" <%if(i==month){out.print(" selected");}%>><%=i%>月</option>
<%
}
%>
</select>
</td>
<td width="100"><font color="#F0F8FF" size="3"> <b>年 份</b> </font></td>
<td>
<select name="year" style="width:125" onchange="document.all.calendar.submit();">
<%
for(int i=0;i<=500;i++)
{
%>
<option value="<%=i+1970%>" <%if(i==year-1970){out.print(" selected");}%>><%=i+1970%>年</option>
<%
}
%>
</select>
</td>
</tr>
</table>
<table border="0" width="450" cellspacing="0" cellpadding="1" bordercolordark="#FFFFFF" bordercolorlight="#000000" style="font-size: 12px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 0px">
<tr>
<td>
<br><img src="images/preyear.gif" style="cursor:hand"
onclick="if(parseInt(document.all.year.value)==1970)
{
return;
}
else
{
window.location='IECalendar.jsp?year='+(parseInt(document.all.year.value)-1)+'&month='+parseInt(document.all.month.value);
}">
<img src="images/premonth.gif" style="cursor:hand"
onclick="if(parseInt(document.all.month.value)==1)
{
window.location='IECalendar.jsp?year='+document.all.year.value+'&month=12';
}
else
{
window.location='IECalendar.jsp?year='+document.all.year.value+'&month='+(parseInt(document.all.month.value)-1)%12;
}">
<img src="images/today.gif" style="cursor:hand" onclick="window.location='IECalendar.jsp';">
<img src="images/nextmonth.gif" style="cursor:hand"
onclick="if(parseInt(document.all.month.value)==11)
{
window.location='IECalendar.jsp?year='+document.all.year.value+'&month=12';
}
else
{
window.location='IECalendar.jsp?year='+document.all.year.value+'&month='+(parseInt(document.all.month.value)+1)%12;
}">
<img src="images/nextyear.gif" style="cursor:hand"
onclick="if(parseInt(document.all.year.value)==2470)
{
return;
}
else
{
window.location='IECalendar.jsp?year='+(parseInt(document.all.year.value)+1)+'&month='+parseInt(document.all.month.value);
}"></td>
</tr>
</table>
<br>
<table border="1" width="450" cellpadding="1" cellspacing="0" bordercolordark="#FFFFFF" cellspacing="0" cellpadding="0" bordercolorlight="#000000" style="font-size: 12px; border-left-width: 1px; border-right-width: 1px; border-top-width: 2px; border-bottom-width: 0px">
<tr bgcolor="#B0C4DE">
<td><font color="gold"><b> 星期日 </b></font></td>
<td><b> 星期一 </b></td>
<td><b> 星期二 </b></td>
<td><b> 星期三 </b></td>
<td><b> 星期四 </b></td>
<td><b> 星期五 </b></td>
<td><font color="gold"><b> 星期六 </b></font></td>
</tr>
<%
int days[]=new int[50];
for(int i=0;i<50;i++)
{
days[i]=0;
}
Calendar myCalendar=new GregorianCalendar();
myCalendar.set(year,month-1,day);
for(int i=1;i<=myCalendar.getActualMaximum(myCalendar.DAY_OF_MONTH);i++)
{
days[myCalendar.get(myCalendar.DAY_OF_WEEK)+i-1]=i;
}
for(int i=0;i<6;i++)
{
%>
<tr bgcolor="#00FA9A">
<%
for(int j=1;j<=7;j++)
{
if(days[i*7+j]==0)
{
%>
<td> </td>
<%
}
else
{
%>
<td><a href="javascript:parent.opener.myGetDate(document.all.year.value+'-'+document.all.month.value+'-'+<%=days[i*7+j]%>);window.close();" style="text-decoration:none">
<font size="3" <%if(days[i*7+j]==calendar.get(calendar.DATE)){out.println("color=/"red/" ");}else{out.println("color=/"blue/" ");}%>>
<b onMouseOver="this.style.color='BLACK';" onMouseOut="<%if(days[i*7+j]==calendar.get(calendar.DATE)){out.print("this.style.color='red'");}else{out.print("this.style.color='blue'");}%>"><%=days[i*7+j]%></b></font></a></td>
<%
}
}
%>
</tr>
<%
}
%>
</table>
</form>
</center>
</body>
</html>
注意事项：请不要单独使用IECalendar.jsp,应为会出错，必须与另外一个包含了
<script language="JavaScript">
var calDateFiled="";
var inDate="";
function setDateField(dateField)
{
calDateField = dateField;
inDate = dateField.value;
}
function myGetDate(selectedDate)
{
calDateField.value = selectedDate;
calDateField.focus();
}
</script>
并由
onClick="setDateField(document.abc.indate);tempstr=window.open('IECalendar.jsp','tony','dependent=yes,titlebar=no,width=465,height=275,location=no');tempstr.moveTo((screen.height-275)/2,(screen.width-475)/2);"
打开的窗口中才能正常工作。
有什么疑问和不足之处请发EMAIL通知我。
NAME:东尼
EMAIL:tonyzhangcn@sohu.com
1、用SELECT标签分别选择年月日
2、给一个INPUT，并定义一个固定的格式，让操作人员自己填写
3、使用MICROSOFT提供的ACTIVEX DATETIMECONTROLLER。
然而这中方法均有缺陷，在1中虽然不会出现一些离谱的数据（如99月88日），但有效性验证和后台数据处理将消耗我们不少的时间和精力。而且一个操作页面如果有较多个日期型字段，一定会给使用者带来困扰。在2中用户可以任意录入年月日，一定会出现离谱的数据也存在有效性验证和后台处理等问题。MICROSOFT的ACTIVEX DATETIMECONTROLLER是个好东西，不过它的CLSID“又长又臭”很难记住 ，还有很多参数需要设置。如果对MICROSOFT的东西不了解，使用起来也方便不到哪儿去。再说不一定每个人的机器上都安装了这个ACTIVEX控件。但是我在做这个日期选择器的时候它给了我不小的启发。下面是我在测试这个日期选择器的一些画面。
1．日期选择前
2.日期选择中
3.日期选择后
结合给出的页面我简单的介绍一下使用方法，做一个需要输入日期数据的页面（见图：日期选择前）在点击确定按钮（如果将确定按钮换成一个小图标效果会更好，愿意动手的可以试一试）的时候会弹出jsp日期选择器。我们可以用画面（见图：日期选择中）中提供的按钮来前后翻，也可以从下拉框中直接选择。月份选择有循环滚动功能给，即1月的前一个月是12月，12月的后一个月是1月，但不提供逢1月（前一月）和12月（后一月）时的年份的变化。如果有需要可以自己在源代码上修改，估计也就是4行的工作两。年份我设置在1970－2470之间。如果有需要，请自己动手修改吧。JSP日期选择器的另一个特点时与星期的对齐是与日常使用的日历对应的。选择后的结果如图“日期选择后” 。不足之处是脱离了WEB SERVER不能使用。
下面给出源代码：
1、testCalendar.jsp的源代码
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
testCalendar
</title>
<script language="JavaScript">
var calDateFiled="";
var inDate="";
function setDateField(dateField)
{
calDateField = dateField;
inDate = dateField.value;
}
function myGetDate(selectedDate)
{
calDateField.value = selectedDate;
calDateField.focus();
}
</script>
</head>
<body>
<form name="abc">
日期:<input type="text" name="indate" readOnly>
<input type="button" name="ok" value="确定" onClick="setDateField(document.abc.indate);tempstr=window.open('IECalendar.jsp','tony','dependent=yes,titlebar=no,width=465,height=275,location=no');tempstr.moveTo((screen.height-275)/2,(screen.width-475)/2);">
</form>
</body>
</html>
2、IECalendar.jsp的源代码
<%@ page contentType="text/html; charset=GB2312" %>
<%@ page import="java.util.Calendar" %>
<%@ page import="java.util.GregorianCalendar" %>
<%@ page import="java.util.Date" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="images/style.css" type="text/css">
<title>
IECalendar
</title>
<script language="JavaScript" >
var daystr="1";
function selectdate()
{
document.all.calendar.submit();
}
function premonth()
{
if(parseInt(document.all.month.value)==1)
{
window.location="IECalendar.jsp?year="+document.all.year.value+"&month=12";
}
else
{
window.location="IECalendar.jsp?year="+document.all.year.value+"&month="+(parseInt(document.all.month.value)-1)%12;
}
}
function nextmonth()
{
if(parseInt(document.all.month.value)==11)
{
window.location="IECalendar.jsp?year="+document.all.year.value+"&month=12";
}
else
{
window.location="IECalendar.jsp?year="+document.all.year.value+"&month="+(parseInt(document.all.month.value)+1)%12;
}
}
function preyear()
{
if(parseInt(document.all.year.value)==1970)
{
return;
}
else
{
window.location="IECalendar.jsp?year="+(parseInt(document.all.year.value)-1)+"&month="+parseInt(document.all.month.value);
}
}
function nextyear()
{
if(parseInt(document.all.year.value)==2470)
{
return;
}
else
{
window.location="IECalendar.jsp?year="+(parseInt(document.all.year.value)+1)+"&month="+parseInt(document.all.month.value);
}
}
function getday()
{
return daystr;
}
</script>
</head>
<%
int year=0;
int month=0;
int day=1;
Date now=new Date();
Calendar calendar=new GregorianCalendar();
calendar.setTime(now);
if((request.getParameter("year")!=null))
{
if((!request.getParameter("year").equals(""))||(!request.getParameter("year").trim().equals("")))
{
year=Integer.parseInt(request.getParameter("year"));
}
else
{
year=calendar.get(calendar.YEAR);
}
}
else
{
year=calendar.get(calendar.YEAR);
}
if((request.getParameter("month")!=null))
{
if((!request.getParameter("month").equals(""))||(!request.getParameter("month").trim().equals("")))
{
month=Integer.parseInt(request.getParameter("month"));
}
else
{
month=Integer.parseInt(request.getParameter("month"));
}
}
else
{
month=calendar.get(calendar.MONTH)+1;
}
// if((request.getParameter("day")!=null))
// {
// if((!request.getParameter("day").equals(""))||(!request.getParameter("day").trim().equals("")))
// {
// day=Integer.parseInt(request.getParameter("day"));
// }
// else
// {
// day=Integer.parseInt(request.getParameter("day"));
// }
// }
// else
// {
// day=calendar.get(calendar.DAY_OF_MONTH);
// }
%>
<body topmargin="5">
<center>
<form action="" name="calendar">
<table border="1" width="450" cellspacing="0" cellpadding="1" bordercolordark="#FFFFFF" bordercolorlight="#000000" style="font-size: 12px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 0px">
<tr bgcolor="#9370DB">
<td width="100"><font color="#F0F8FF" size="3"> <b>月 份</b> </font></td>
<td>
<select name="month" style="width:125" onchange="document.all.calendar.submit();">
<%
for(int i=1;i<=12;i++)
{
%>
<option value="<%=i%>" <%if(i==month){out.print(" selected");}%>><%=i%>月</option>
<%
}
%>
</select>
</td>
<td width="100"><font color="#F0F8FF" size="3"> <b>年 份</b> </font></td>
<td>
<select name="year" style="width:125" onchange="document.all.calendar.submit();">
<%
for(int i=0;i<=500;i++)
{
%>
<option value="<%=i+1970%>" <%if(i==year-1970){out.print(" selected");}%>><%=i+1970%>年</option>
<%
}
%>
</select>
</td>
</tr>
</table>
<table border="0" width="450" cellspacing="0" cellpadding="1" bordercolordark="#FFFFFF" bordercolorlight="#000000" style="font-size: 12px; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 0px">
<tr>
<td>
<br><img src="images/preyear.gif" style="cursor:hand"
onclick="if(parseInt(document.all.year.value)==1970)
{
return;
}
else
{
window.location='IECalendar.jsp?year='+(parseInt(document.all.year.value)-1)+'&month='+parseInt(document.all.month.value);
}">
<img src="images/premonth.gif" style="cursor:hand"
onclick="if(parseInt(document.all.month.value)==1)
{
window.location='IECalendar.jsp?year='+document.all.year.value+'&month=12';
}
else
{
window.location='IECalendar.jsp?year='+document.all.year.value+'&month='+(parseInt(document.all.month.value)-1)%12;
}">
<img src="images/today.gif" style="cursor:hand" onclick="window.location='IECalendar.jsp';">
<img src="images/nextmonth.gif" style="cursor:hand"
onclick="if(parseInt(document.all.month.value)==11)
{
window.location='IECalendar.jsp?year='+document.all.year.value+'&month=12';
}
else
{
window.location='IECalendar.jsp?year='+document.all.year.value+'&month='+(parseInt(document.all.month.value)+1)%12;
}">
<img src="images/nextyear.gif" style="cursor:hand"
onclick="if(parseInt(document.all.year.value)==2470)
{
return;
}
else
{
window.location='IECalendar.jsp?year='+(parseInt(document.all.year.value)+1)+'&month='+parseInt(document.all.month.value);
}"></td>
</tr>
</table>
<br>
<table border="1" width="450" cellpadding="1" cellspacing="0" bordercolordark="#FFFFFF" cellspacing="0" cellpadding="0" bordercolorlight="#000000" style="font-size: 12px; border-left-width: 1px; border-right-width: 1px; border-top-width: 2px; border-bottom-width: 0px">
<tr bgcolor="#B0C4DE">
<td><font color="gold"><b> 星期日 </b></font></td>
<td><b> 星期一 </b></td>
<td><b> 星期二 </b></td>
<td><b> 星期三 </b></td>
<td><b> 星期四 </b></td>
<td><b> 星期五 </b></td>
<td><font color="gold"><b> 星期六 </b></font></td>
</tr>
<%
int days[]=new int[50];
for(int i=0;i<50;i++)
{
days[i]=0;
}
Calendar myCalendar=new GregorianCalendar();
myCalendar.set(year,month-1,day);
for(int i=1;i<=myCalendar.getActualMaximum(myCalendar.DAY_OF_MONTH);i++)
{
days[myCalendar.get(myCalendar.DAY_OF_WEEK)+i-1]=i;
}
for(int i=0;i<6;i++)
{
%>
<tr bgcolor="#00FA9A">
<%
for(int j=1;j<=7;j++)
{
if(days[i*7+j]==0)
{
%>
<td> </td>
<%
}
else
{
%>
<td><a href="javascript:parent.opener.myGetDate(document.all.year.value+'-'+document.all.month.value+'-'+<%=days[i*7+j]%>);window.close();" style="text-decoration:none">
<font size="3" <%if(days[i*7+j]==calendar.get(calendar.DATE)){out.println("color=/"red/" ");}else{out.println("color=/"blue/" ");}%>>
<b onMouseOver="this.style.color='BLACK';" onMouseOut="<%if(days[i*7+j]==calendar.get(calendar.DATE)){out.print("this.style.color='red'");}else{out.print("this.style.color='blue'");}%>"><%=days[i*7+j]%></b></font></a></td>
<%
}
}
%>
</tr>
<%
}
%>
</table>
</form>
</center>
</body>
</html>
注意事项：请不要单独使用IECalendar.jsp,应为会出错，必须与另外一个包含了
<script language="JavaScript">
var calDateFiled="";
var inDate="";
function setDateField(dateField)
{
calDateField = dateField;
inDate = dateField.value;
}
function myGetDate(selectedDate)
{
calDateField.value = selectedDate;
calDateField.focus();
}
</script>
并由
onClick="setDateField(document.abc.indate);tempstr=window.open('IECalendar.jsp','tony','dependent=yes,titlebar=no,width=465,height=275,location=no');tempstr.moveTo((screen.height-275)/2,(screen.width-475)/2);"
打开的窗口中才能正常工作。
有什么疑问和不足之处请发EMAIL通知我。
NAME:东尼
EMAIL:tonyzhangcn@sohu.com
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用JSP制作的日期选择器
- JSP 页面通过 Juqery 实现输入框选择日期
- jsp日期选择器
- jsp中弹出日期选择框，js控件，三种样式
- （极简）SpringMVC，从jsp页面选择日期（String）传入后台（Date）数据库（Date）完整流程
- JSP自定义标签（三）自定义日期选择标签
- 在jsp中使用My97DatePicker日期插件 在页面上不显示日期选择框的原因
- jsp日期选择框 ，无需第三方js控件
- Java制作的日期选择控件
- 使用第三方WheelView制作日期选择器
- 用EditText和DatePicker制作的日期选择器
- 使用DatePickerDialog制作日期选择器
- 7.使用UITableView和UIDatePicker制作一个日期选择器
- 制作简单的日期选择的下拉菜单
- 使用DatePickerDialog制作日期选择器
- JSP定制标记——分析java.util.Locale，根据地区选择显示日期的标记
- Unity3D UGUI制作滚动日期选择
- 很不错的js日期控件/在jsp页面弹出选择日期
- jsp中用js实现日期选择的功能
- 如何使用Dojo的DatePicker控件制作联动日期选择器