WEB开发网
开发学院WEB开发ASP 用ASP开发WEB日期选择器 阅读

用ASP开发WEB日期选择器

 2002-08-05 11:09:55 来源:WEB开发网   
核心提示:在WEB结构程序开发中,日期数据在表单中输入可以采用很多种方法,用ASP开发WEB日期选择器,常见的有:1、在文本框中让用户按规定好的日期格式直接输入,这种方法最简单,将其放在内嵌框架里,让用户在同一页面不刷新的情况下方便选择,可是用户使用起来很麻烦,而且程序员还要在后台对输入的日期进行数据验证
在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=http://www.cncms.com/"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

Tags:ASP 开发 WEB

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接