程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> .NET實例教程 >> asp.net Ajax--Calendar控件使用

asp.net Ajax--Calendar控件使用

編輯:.NET實例教程

簡介    
    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,關於改樣式的解釋在後面講到:

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;
}
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:非本月日期的樣式名

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved