你的位置: Kiyo'Space首页 ASP 阅读文章 欢迎留下您的足迹

用ASP开发WEB日期选择器

[ ASP ] 分享

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


欢迎在此留下您的脚步






评论内容 (*必填):
(Ctrl + Enter 快速提交)