Asp.Net Ajax–Calendar控制項使用

文章目錄

• 簡介
• 重要屬性
• 樣本1
• 樣本2

簡介

Calendar控制項是一個很簡單的控制項，主要用來在頁面中提供日曆的選擇，其實現在已經有很多用javascript寫的日曆控制項，但是Canlendar日曆控制項能夠讓我們更快速地來實現這種效果，只需要進行一些簡單的設定即可。

重要屬性

TargetControlID：用來顯示選擇日期的控制項，改控制項必需為TextBox
CssClass：設定日曆的樣式
Format：顯示日期的格式，如yyMMdd,會顯示071105
PopupButtonID：當日期是通過選定某個按鈕彈出的時候，為改按鈕的ID，一般為一個日曆圖片

樣本1

1.開啟visual studio2005，建立一個AjaxControlToolkit網站。
2.在網站根目錄下添加一個表單，命名為Calendar1.aspx。
3.切換到設計檢視，在頁面上添加ScriptManger，一個TextBox和一個CalendarEntender控制項。
4.設定CalendarExtender控制項的屬性如下：

<cc1:CalendarExtender TargetControlID="txtDate" runat="server" Format="yyMMdd" ID="calDate"   CssClass="MyCalendar"/>

下面是樣式代碼，對應上面的CssClass，關於改樣式的解釋在後面講到：

<style type="text/css">       .MyCalendar .ajax__calendar_container      {          border:1px solid #646464;          background-color:#faac38;                }      .MyCalendar .ajax__calendar_other .ajax__calendar_day,      .MyCalendar .ajax__calendar_other .ajax__calendar_year      {          color:#ffffff;      }      .MyCalendar .ajax__calendar_hover .ajax__calendar_day      {          color:red;          background-color:#e8e8e8;      }      .MyCalendar .ajax__calendar_active .ajax__calendar_day      {          color:blue;          font-weight:bolder;          background-color:#e8e8e8;      }  </style>

5.儲存設計，F5運行，當文字框控制項獲得焦點時就會彈出日曆控制項，選擇日期後所選日期會按照所設定的格式顯示在文字框中，然後日曆控制項會自動隱藏。

樣本2

這個例子是單擊一個圖片按鈕後會彈出日曆控制項，這個在網站中也是經常用到的

1.在網站的根目錄下建立一個web表單，命名為Calendar2.aspx.

2.步驟和上面的一樣，只是在頁面中多了一個image控制項，Calendar控制項的設定如下：

<cc1:CalendarExtender TargetControlID="txtDate" runat="server" Format="yyMMdd" ID="calDate"  PopupButtonID="imgDate" CssClass="MyCalendar"/>

設定基本上和上一個樣本一樣，多了一個PopupButtonID，用來制定點擊的圖片
3.儲存設計，按F5運行，當單擊日曆圖片時會彈出日曆控制項，選擇了日期，控制項會隱藏，選擇的日期會顯示在文字框中。

註：屬性Format用來控制日期顯示的格式，但要注意代表月的M一定要大寫，如：yyyy－MM－dd，yyyy/M/d,yyyy年MM月dd日

CssClass說明：

.ajax_calendar_container:日曆控制項的整體內容部分

.ajax_calendar_footer:日曆控制項的頁尾部分

.ajax_calendar_header:日曆控制項的頁首部分

.ajax_calendar_activa .ajax_calendar_day:選中日期時的樣式，一般選擇過的日期會以另一種顏色顯示。

.ajax_calendar_hover .ajax_calendar_day:滑鼠划過日期時的樣式，一般改變懸停在的日期的前景色彩和背景色。

.ajax_calendar_other .ajax_calendar_day:非本月日期的樣式名