在WEB结构程序开发中，日期数据在表单中输入可以采用很多种方法，常见的有：1、在文本框中让用户按规定好的日期格式直接输入。这种方法最简单，可是用户使用起来很麻烦，而且程序员还要在后台对输入的日期进行数据验证，所以显得很笨拙；2、用下拉列表列出年份、月份、天数由用户选择输入。这种方法更麻烦，用户操作看似比上一种方便了，可是每一个日期输入都需要程序员在后台对年份、月份、天数一一循环列出，而且在列出前或用户输入后还是要对日期信息进行验证，所以这种方法也不可取；3、用ActiveX日历控件，在前台输入。这种方法很方便，可是唯一缺点也是最致命的一个弱点：需要每个客户端都要装有ActiveX控件。
最近，笔者用ASP结合JavaScript，开发了这样一个模仿控件式的日期选择器。用户操作更直观、更方便；程序后台实现时可以在每次需要时很方便的调用，而不需要客户端安装任何程序。
在此，将源代码贡献出来与大家一起分享。
[原理]
使用页面通过打开定制窗口调用日期选择程序，并将使用页面内的FormName,FiledName元素属性传给日期选择程序。在日期选择程序中，用ASP在后台计算并显示出日历，用户选择后，将日期值再传回使用页面的Filed.value,最后自动关闭弹出窗口完成选择。
[源程序]
1、sample.htm(使用页面) 2、calendar.asp (日期选择器程序)
1、sample.htm========================================================<html><head><title>Calendar Sample</title></head><body><form method='POST' action='sample.htm' name='sample'> <b><font face='Arial'>Sample</font></b><p> <font face='Arial'><span style='font-size: 9pt; font-weight:
700'>Date: </span> </font><input type='text' name='date' size='10' readonly> <a href='https://www.6hehe.com/bcjs/22406.html#SelectDate'
onClick='JavaScript:window.open('calendar.asp?form=sample&field=date'
,'','directorys=no,toolbar=no,status=no,menubar=no,scrollbars=no,resi
zable=no,width=190,height=140');'> <img border='0' src='https://www.6hehe.com/bcjs/images/date_picker.gif'
height='16'></a></p> <p><input type='submit' value='submit' name='B1'></p></form></body></html>===========================================================
2、calendar.asp
===========================================================<%'WEB Calendar'By Chaiwei 2002-7-31'--------------------------------
'月份名称定义Dim Month_Name(12)Month_Name(1) = 'January'Month_Name(2) = 'February'Month_Name(3) = 'March'Month_Name(4) = 'April'Month_Name(5) = 'May'Month_Name(6) = 'June'Month_Name(7) = 'July'Month_Name(8) = 'August'Month_Name(9) = 'September'Month_Name(10) = 'October'Month_Name(11) = 'November'Month_Name(12) = 'December'
'年份处理,默认值为服务器当前年份if request.querystring('year')<>'' then Year_var=cint(request.querystring('year'))else Year_var=year(date())end if
'上一年、下一年赋值Previous_year=Year_var-1Next_year=Year_var+1
'月份处理,默认值为服务器当前月份if request.querystring('Month')<>'' then Month_var=cint(request.querystring('Month'))else Month_var=month(date())end if
'上一月、下一月赋值if Month_var<=1 then Next_month=Month_var+1 Previous_month=1else if Month_var>=12 then Next_month=12 Previous_month=Month_var-1 else Next_month=Month_var+1 Previous_month=Month_var-1 end ifend if
'当前天数定位计算First_day=DateSerial(Year_var,Month_var,1)Current_day=First_day-weekday(First_day)+2
%><html><head><title>Calendar</title><Script Language='JavaScript'>
//前端日期选择函数
function pick(v) {
window.opener.document.<%=request.querystring('form')%>.<%=request.qu
erystring('field')%>.value=v; window.close(); return false;}</Script><style><!--.page;;;;;{ text-decoration: none; color: #CAE3FF; font-size:9pt;
font-family:Webdings }.dayTable;{ border: 1px dotted #E6E6E6; padding-left: 4;
padding-right: 4; padding-top: 1; padding-bottom: 1}.day { font-family: Arial; font-size: 9pt; text-decoration:
underline; color: #000000 }:hover.day{ font-family: Arial; font-size: 9pt; text-decoration:
none; color: #FF0000 }.title;;;;{ font-family: Arial; font-size: 9pt; color: #FFFFFF;
font-weight: bold }:hover.page; { text-decoration: underline; color: #FFFFFF;
font-family:Webdings; font-size:9pt }--></style></head><body topmargin='0' leftmargin='0' onLoad='window.focus();'><div align='center'> <center> <table border='0' cellspacing='0'
cellpadding='0'> <tr> <td bgcolor='#003063'> <% '日历表头显示 %> <div align='center'> <center> <table border='0' cellspacing='0' style='border-collapse:
collapse' cellpadding='2'> <tr> <td align='center'> <a
href='https://www.6hehe.com/bcjs/calendar.asp?year=<%=Previous_year%>&month=<%=Month_var%>&form=
<%=request.querystring('form')%>&field=<%=request.querystring('field'
)%>' class='page'>7</a> <a
href='https://www.6hehe.com/bcjs/calendar.asp?year=<%=Year_var%>&month=<%=Previous_month%>&form=
<%=request.querystring('form')%>&field=<%=request.querystring('field'
)%>' class='page'>3</a></td> <td
class='title'><%response.write Month_Name(Month_var) & ' ' &
Year_var%></td> <td align='center'> <a
href='https://www.6hehe.com/bcjs/calendar.asp?year=<%=Year_var%>&month=<%=Next_month%>&form=<%=r
equest.querystring('form')%>&field=<%=request.querystring('field')%>'
title='Next Month' class='page'>4</a> <a
href='https://www.6hehe.com/bcjs/calendar.asp?year=<%=Next_year%>&month=<%=Month_var%>&form=<%=r
equest.querystring('form')%>&field=<%=request.querystring('field')%>'
title='Next Year' class='page'>8</a></td> </tr> </table> </center> </div> </td> </tr> <tr> <td width='100%'> <div align='center'> <center> <table border='0' cellspacing='0' style='border-collapse:
collapse' cellpadding='3'> <tr> <td bgcolor='#31659C'
class='title'>Mon</td> <td bgcolor='#31659C'
class='title'>Tur</td> <td bgcolor='#31659C'
class='title'>Wed</td> <td bgcolor='#31659C'
class='title'>Thu</td> <td bgcolor='#31659C'
class='title'>Fri</td> <td bgcolor='#31659C'
class='title'>Sat</td> <td bgcolor='#31659C'
class='title'>Sun</td> </tr> <% '日历内容 5行*7例 显示 '外层循环显示控制行 for i=0 to 4 %> <tr> <% '内层循环显示控制列 for j=0 to 6 response.write '<td
class='dayTable'' '天数显示，“今天”显示 if Current_day = date then response.write ' bgcolor='#FFFFE0'>' %><a
href='javascript:pick('<%=Current_day%>');'
class='day'><b><%=day(Current_day)%></b></a><%; else '天数显示，非本月天数显示 if Month(Current_day) <> Month_var
then response.write '
bgcolor='#F0F0F0'>' %> <a
href='javascript:pick('<%=Current_day%>');'
class='day'><font color='#CCCCCC'><%=day(Current_day)%></font></a><% else '天数显示，本月天数显示 response.write '>' %> <a
href='javascript:pick('<%=Current_day%>');'
class='day'><%=day(Current_day)%></a><% end if end if '天数累加推算 Current_day = Current_day + 1 response.write '</td>' next %> </tr> <% next %> </table> </center> </div> </td> </tr> </table> </center></div></body></html>===========================================================
[后记]
其实这个日期选择器通用性很大，稍加改动还可以在其它应用中发挥更多效力。比如，在开发日程安排的程序时，将其放在内嵌框架里，让用户在同一页面不刷新的情况下方便选择，安排事务更是方便有效。
