用ASP開發WEB日期選取器

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在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=http://www.dvbbs.net/tech/asp/"#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.dvbbs.net/tech/asp/"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>
===========================================================

[後記]

　　其實這個日期選取器通用性很大，稍加改動還可以在其它應用中發揮更多效力。比如，在開發排程的程式時，將其放在內嵌架構裡，讓使用者在同一頁面不重新整理的情況下方便選擇，安排事務更是方便有效。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

用ASP開發WEB日期選取器

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support