热点排行

用JSP制作的日期选择器

类别：Java 点击：0 评论：0 推荐：

我们在做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">&nbsp;<b>月  份</b>&nbsp;</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">&nbsp;<b>年  份</b>&nbsp;</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);

  }">&nbsp;

<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;

  }">&nbsp;

<img src="images/today.gif" style="cursor:hand" onclick="window.location='IECalendar.jsp';">&nbsp;

<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;

  }">&nbsp;

<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>&nbsp;星期日&nbsp;</b></font></td>

  <td><b>&nbsp;星期一&nbsp;</b></td>

  <td><b>&nbsp;星期二&nbsp;</b></td>

  <td><b>&nbsp;星期三&nbsp;</b></td>

  <td><b>&nbsp;星期四&nbsp;</b></td>

  <td><b>&nbsp;星期五&nbsp;</b></td>

  <td><font color="gold"><b>&nbsp;星期六&nbsp;</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>&nbsp;</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]

 

 

本文地址：http://com.8s8s.com/it/it18107.htm

Copyright © 2004-2013 信息技术中文网 All rights reserved 版权所有

Powered by 信息技术中文网 Ver2.0