文章探索:   分类:    关键字:  
  + 栏目导航
  + 相关文章
asp中有关字符编码转换的几个函数
绝妙的asp生成静态页面html函数
Asp计算页面执行时间
一个简单的用存储过程分页
将asp页面转换成htm页面
ASP网站漏洞解析及黑客入侵防范方法
URL编码与SQL注入
几种常用排序算法(asp)
ASP调用带参数存储过程的几种方式
实用的ASP连接数据库的函数
ASP如何获取真实IP地址
ASP中怎么实现SQL数据库备份、恢复
判断Cookies是否处于开启状态
怎样才能将服务器端文件夹下的文件,..
几行Asp代码实现防止表单重复提交
用ASP设计网站在线人数统计程序
asp论坛在线人数统计研究
如何用ASP远程在数据库中创建Table
用ASP调用SQL Server的视图和存储过程
Asp与XML的关系
ASP读取EXCEL
在ASP中使用Oracle数据库技巧
一个通过web.Mail发送邮件的类
几种打开记录集方式的比较
购物车范例(购物车页面 )
如何使用FSO搜索硬盘文件
GB码和BIG5码的互换技术
用ASP开发WEB日期选择器
一个投票系统的源程序(coveryourasp.c..
列出服务器上的打印机


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




Copyright(C)2007-2021 广州市佳沛数码科技有限公司 版权所有
公司地址: 广州市荔湾区东漖北路560号511室
电话:020-81803473 传真:020-81544987