在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 }
|