用ASP开发WEB日期选择器

在WEB结构程序开发中，日期数据在表单中输入可以采用很多种方法，常见的有：
1、在文本框中让用户按规定好的日期格式直接输入。这种方法最简单，可是用户使用起来很麻烦，而且程序员还要在后台对输入的日期进行数据验证，所以显得很笨拙；
2、用下拉列表列出年份、月份、天数由用户选择输入。这种方法更麻烦，用户操作看似比上一种方便了，可是每一个日期输入都需要程序员在后台对年份、月份、天数一一循环列出，而且在列出前或用户输入后还是要对日期信息进行验证，所以这种方法也不可取；
3、用ActiveX日历控件，在前台输入。这种方法很方便，可是唯一缺点也是最致命的一个弱点：需要每个客户端都要装有ActiveX控件。

最近，笔者用ASP结合JavaScript，开发了这样一个模仿控件式的日期选择器。用户操作更直观、更方便；程序后台实现时可以在每次需要时很方便的调用，而不需要客户端安装任何程序。

在此，将源代码贡献出来与大家一起分享。

[原理]

使用页面通过打开定制窗口调用日期选择程序，并将使用页面内的FormName,FiledName元素属性传给日期选择程序。在日期选择程序中，用ASP在后台计算并显示出日历，用户选择后，将日期值再传回使用页面的Filed.value,最后自动关闭弹出窗口完成选择。

[源程序]

1、sample.htm (使用页面)
2、calendar.asp (日期选择器程序)

1、sample.htm

 1<html>
 2<head>
 3<title>Calendar Sample</title>
 4</head>
 5<body>
 6<form action="sample.htm" method="POST" name="sample">
 7<b><font face="Arial">Sample</font></b><p>
 8<font face="Arial"><span style="font-size: 9pt; font-weight:   
 9  
10700">Date: </span>
11</font><input name="date" readonly="" size="10" type="text"/>
12<a href="#SelectDate" onclick="JavaScript:window.open('calendar.asp?form=sample&amp;field=date'   
13  
14,'','directorys=no,toolbar=no,status=no,menubar=no,scrollbars=no,resi   
15  
16zable=no,width=190,height=140');">
17<img border="0" height="16" src="images/date_picker.gif" width="24"/></a></p>
18<p><input name="B1" type="submit" value="submit"/></p>
19</form>
20</body>
21</html>

===========================================================

2、calendar.asp

 1   
 2'WEB Calendar   
 3'By Chaiwei 2002-7-31   
 4'--------------------------------   
 5  
 6'月份名称定义   
 7Dim Month_Name(12)   
 8Month_Name(1) = "January"   
 9Month_Name(2) = "February"   
10Month_Name(3) = "March"   
11Month_Name(4) = "April"   
12Month_Name(5) = "May"   
13Month_Name(6) = "June"   
14Month_Name(7) = "July"   
15Month_Name(8) = "August"   
16Month_Name(9) = "September"   
17Month_Name(10) = "October"   
18Month_Name(11) = "November"   
19Month_Name(12) = "December"   
20  
21'年份处理,默认值为服务器当前年份   
22if request.querystring("year")<>"" then   
23Year_var=cint(request.querystring("year"))   
24else   
25Year_var=year(date())   
26end if   
27  
28'上一年、下一年赋值   
29Previous_year=Year_var-1   
30Next_year=Year_var+1   
31  
32  
33'月份处理,默认值为服务器当前月份   
34if request.querystring("Month")<>"" then   
35Month_var=cint(request.querystring("Month"))   
36else   
37Month_var=month(date())   
38end if   
39  
40'上一月、下一月赋值   
41if Month_var<=1 then   
42Next_month=Month_var+1   
43Previous_month=1   
44else   
45if Month_var>=12 then   
46Next_month=12   
47Previous_month=Month_var-1   
48else   
49Next_month=Month_var+1   
50Previous_month=Month_var-1   
51end if   
52end if   
53  
54'当前天数定位计算   
55First_day=DateSerial(Year_var,Month_var,1)   
56Current_day=First_day-weekday(First_day)+2   
57  

 1<html>
 2<head>
 3<title>Calendar</title>
 4<script language="JavaScript">   
 5  
 6//前端日期选择函数   
 7  
 8function pick(v) {   
 9  
10  
11window.opener.document.```
12=request.querystring("form")
13```.```
14=request.qu   
15  
16erystring("field")
17```.value=v;   
18window.close();   
19return false;   
20}   
21</script>
22<style>   
23<!--   
24.page { text-decoration: none; color: #CAE3FF; font-size:9pt;   
25  
26font-family:Webdings }   
27.dayTable { border: 1px dotted #E6E6E6; padding-left: 4;   
28  
29padding-right: 4; padding-top: 1; padding-bottom: 1}   
30.day { font-family: Arial; font-size: 9pt; text-decoration:   
31  
32underline; color: #000000 }   
33:hover.day { font-family: Arial; font-size: 9pt; text-decoration:   
34  
35none; color: #FF0000 }   
36.title { font-family: Arial; font-size: 9pt; color: #FFFFFF;   
37  
38font-weight: bold }   
39:hover.page { text-decoration: underline; color: #FFFFFF;   
40  
41font-family:Webdings; font-size:9pt }   
42\-->   
43</style>
44</head>
45<body leftmargin="0" onload="window.focus();" topmargin="0">
46<div align="center">
47<center>
48<table border="0" cellpadding="0" cellspacing="0" id="AutoNumber1" style="border-collapse: collapse" width="100%">
49<tr>
50<td bgcolor="#003063" width="100%">

'日历表头显示

 1<div align="center">
 2<center>
 3<table border="0" cellpadding="2" cellspacing="0" id="AutoNumber3" style="border-collapse:   
 4  
 5collapse" width="100%">
 6<tr>
 7<td align="center" width="20%">
 8<a )="" =request.querystring("field"="" ```"="" ```&field="```" class="page" form")="" href="calendar.asp?year=```
 9=Previous_year
10```&amp;amp;month=```
11=Month_var
12```&amp;amp;form=   
13

=request.querystring(" title="Previous Year">7 <a )="" =request.querystring("field"="" "="" &field="" class="page" form")="" href="calendar.asp?year= =Year_var &amp;amp;month= =Previous_month

1

=request.querystring(" title="Previous Month">3

``` response.write Month_Name(Month_var) &amp; " " &amp;

Year_var

 1<td align="center" width="20%">
 2<a =request.querystring("field")="" ```"="" ```&field="```" class="page" form")="" href="calendar.asp?year=```
 3=Year_var
 4```&amp;amp;month=```
 5=Next_month
 6```&amp;amp;form=```
 7=r   
 8  
 9equest.querystring(" title="Next Month">4</a>
10<a =request.querystring("field")="" ```"="" ```&field="```" class="page" form")="" href="calendar.asp?year=```
11=Next_year
12```&amp;amp;month=```
13=Month_var
14```&amp;amp;form=```
15=r   
16  
17equest.querystring(" title="Next Year">8</a></td>
18</tr>
19</table>
20</center>
21</div>
22</td>
23</tr>
24<tr>
25<td width="100%">
26<div align="center">
27<center>
28<table border="0" cellpadding="3" cellspacing="0" id="AutoNumber2" style="border-collapse:   
29  
30collapse" width="100%">
31<tr>
32<td align="center" bgcolor="#31659C" class="title">Mon</td>
33<td align="center" bgcolor="#31659C" class="title">Tur</td>
34<td align="center" bgcolor="#31659C" class="title">Wed</td>
35<td align="center" bgcolor="#31659C" class="title">Thu</td>
36<td align="center" bgcolor="#31659C" class="title">Fri</td>
37<td align="center" bgcolor="#31659C" class="title">Sat</td>
38<td align="center" bgcolor="#31659C" class="title">Sun</td>
39</tr>

'日历内容 5行*7例 显示
'外层循环显示控制行

for i=0 to 4

1<tr>

'内层循环显示控制列

for j=0 to 6
response.write "<td "="" '天数显示，“今天”显示="" align="center" bgcolor="#FFFFE0" class="dayTable" current_day="date" if="" response.write="" then="">"

<a class="day" href="javascript:pick(' =Current_day ');" title="Today"><b> =day(Current_day) </b></a>

else

'天数显示，非本月天数显示

if Month(Current_day) &lt;&gt; Month_var

then
response.write "

bgcolor='#F0F0F0'&gt;"

 1<a class="day" href="javascript:pick('```
 2=Current_day
 3```');" title="```
 4=Current_day
 5```"><font color="#CCCCCC">```
 6=day(Current_day)
 7```</font></a>```
 8   
 9else   
10  
11'天数显示，本月天数显示   
12response.write "&amp;gt;"

=day(Current_day)```

end if

end if

'天数累加推算

Current_day = Current_day + 1
response.write "</td>"
next

1</tr>

next

 1</table>
 2</center>
 3</div>
 4</td>
 5</tr>
 6</table>
 7</center>
 8</div>
 9</body>
10</html>

===========================================================

[后记]

其实这个日期选择器通用性很大，稍加改动还可以在其它应用中发挥更多效力。比如，在开发日程安排的程序时，将其放在内嵌框架里，让用户在同一页面不刷新的情况下方便选择，安排事务更是方便有效。

2002-8-2

Published At
Categories with Web编程
Tagged with
comments powered by Disqus