文件大小:50 k |
|
|
运行平台:Windows9X/ME/NT/2000/XP |
|
级别评定:
|
|
添加时间:2008-12-18 9:37:37 |
|
最后更新:2008-12-18 9:37:37 |
|
相关链接:无 |
|
所需金额:0 元 |
|
添加者:管理员 |
|
管理首页
在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,resizable=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-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.querystring("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=<%=request.querystring("form")%>&field=<%=request.querystring("field")%>" title="Next Month" class="page">4</a> <a href="calendar.asp?year=<%=Next_year%>&month=<%=Month_var%>&form=<%=request.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
|
|
|