结合给出的页面我简单的介绍一下使用方法，做一个需要输入日期数据的页面（见图：日期选择前）在点击确定按钮（如果将确定按钮换成一个小图标效果会更好，愿意动手的可以试一试）的时候会弹出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:[email protected]
本类阅读TOP10
