当前页面位置: » 丰搜网 » 文档中心 » 详细内容
用asp开发web日期选择器
在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="#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="images/date_picker.gif" width="24"
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-1
next_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=1
else
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 if
end 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" style="border-collapse: collapse"
width="100%" id="autonumber1" cellpadding="0">
<tr>
<td width="100%" bgcolor="#003063">
<%
'日历表头显示
%>
<div align="center">
<center>
<table border="0" cellspacing="0" style="border-collapse:
collapse" width="100%" id="autonumber3" cellpadding="2">
<tr>
<td width="20%" align="center">
<a
href="calendar.asp?year=<%=previous_year%>&month=<%=month_var%>&form=
<%=request.querystring("form")%>&field=<%=request.querystring("field"
)%>" title="previous year" class="page">7</a>
<a
href="calendar.asp?year=<%=year_var%>&month=<%=previous_month%>&form=
<%=request.querystring("form")%>&field=<%=request.querystring("field"
)%>" title="previous month" class="page">3</a></td>
<td width="60%" align="center"
class="title"><%response.write month_name(month_var) & " " &
year_var%></td>
<td width="20%" align="center">
<a
href="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="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" width="100%" id="autonumber2" cellpadding="3">
<tr>
<td align="center" bgcolor="#31659c"
class="title">mon</td>
<td align="center" bgcolor="#31659c"
class="title">tur</td>
<td align="center" bgcolor="#31659c"
class="title">wed</td>
<td align="center" bgcolor="#31659c"
class="title">thu</td>
<td align="center" bgcolor="#31659c"
class="title">fri</td>
<td align="center" bgcolor="#31659c"
class="title">sat</td>
<td align="center" bgcolor="#31659c"
class="title">sun</td>
</tr>
<%
'日历内容 5行*7例 显示
'外层循环显示控制行
for i=0 to 4
%>
<tr>
<%
'内层循环显示控制列
for j=0 to 6
response.write "<td align='center'
class='daytable'"
'天数显示，“今天”显示
if current_day = date then
response.write " bgcolor='#ffffe0'>"
%><a
href="javascript:pick('<%=current_day%>');" title="today"
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%>');" title="<%=current_day%>"
class="day"><font color="#cccccc"><%=day(current_day)%></font></a><%
else
'天数显示，本月天数显示
response.write ">"
%>
<a
href="javascript:pick('<%=current_day%>');" title="<%=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>
===========================================================
[后记]
其实这个日期选择器通用性很大，稍加改动还可以在其它应用中发挥更多效力。比如，在开发日程安排的程序时，将其放在内嵌框架里，让用户在同一页面不刷新的情况下方便选择，安排事务更是方便有效。
2002-8-2
