Asp.net Ajax--Calendar控件使用

songlai

簡(jiǎn)介
Calendar控件是一個(gè)很簡(jiǎn)單的控件，主要用來(lái)在頁(yè)面中提供日歷的選擇，其實(shí)現(xiàn)在已經(jīng)有很多用javascript寫(xiě)的日歷控件，但是Canlendar日歷控件能夠讓我們更快速地來(lái)實(shí)現(xiàn)這種效果，只需要進(jìn)行一些簡(jiǎn)單的設(shè)置即可。
重要屬性
TargetControlID：用來(lái)顯示選擇日期的控件，改控件必需為T(mén)extBox
CssClass：設(shè)置日歷的樣式
Format：顯示日期的格式，如yyMMdd,會(huì)顯示071105
PopupButtonID：當(dāng)日期是通過(guò)選定某個(gè)按鈕彈出的時(shí)候，為改按鈕的ID，一般為一個(gè)日歷圖片

示例1
1.打開(kāi)visual studio2005，新建一個(gè)AjaxControlToolkit網(wǎng)站。
2.在網(wǎng)站根目錄下添加一個(gè)窗體，命名為Calendar1.aspx。
3.切換到設(shè)計(jì)視圖，在頁(yè)面上添加ScriptManger，一個(gè)TextBox和一個(gè)CalendarEntender控件。
4.設(shè)置CalendarExtender控件的屬性如下：
<cc1:CalendarExtender TargetC runat="server" Format="yyMMdd" ID="calDate" CssClass="MyCalendar"/>
下面是樣式代碼，對(duì)應(yīng)上面的CssClass，關(guān)于改樣式的解釋在后面講到：
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.保存設(shè)計(jì)，F(xiàn)5運(yùn)行，當(dāng)文本框控件獲得焦點(diǎn)時(shí)就會(huì)彈出日歷控件，選擇日期后所選日期會(huì)按照所設(shè)定的格式顯示在文本框中，然后日歷控件會(huì)自動(dòng)隱藏。

示例2
這個(gè)例子是單擊一個(gè)圖片按鈕后會(huì)彈出日歷控件，這個(gè)在網(wǎng)站中也是經(jīng)常用到的
1.在網(wǎng)站的根目錄下新建一個(gè)web窗體，命名為Calendar2.aspx.
2.步驟和上面的一樣，只是在頁(yè)面中多了一個(gè)image控件，Calendar控件的設(shè)置如下：
<cc1:CalendarExtender TargetC runat="server" Format="yyMMdd" ID="calDate" PopupButtonID="imgDate" CssClass="MyCalendar"/>設(shè)置基本上和上一個(gè)示例一樣，多了一個(gè)PopupButtonID，用來(lái)制定點(diǎn)擊的圖片
3.保存設(shè)計(jì)，按F5運(yùn)行，當(dāng)單擊日歷圖片時(shí)會(huì)彈出日歷控件，選擇了日期，控件會(huì)隱藏，選擇的日期會(huì)顯示在文本框中。

注：屬性Format用來(lái)控制日期顯示的格式，但要注意代表月的M一定要大寫(xiě)，如：yyyy－MM－dd，yyyy/M/d,yyyy年MM月dd日
CssClass說(shuō)明：
.ajax_calendar_container:日歷控件的整體內(nèi)容部分
.ajax_calendar_footer:日歷控件的頁(yè)腳部分
.ajax_calendar_header:日歷控件的頁(yè)眉部分
.ajax_calendar_activa .ajax_calendar_day:選中日期時(shí)的樣式，一般選擇過(guò)的日期會(huì)以另一種顏色顯示。
.ajax_calendar_hover .ajax_calendar_day:鼠標(biāo)劃過(guò)日期時(shí)的樣式，一般改變懸停在的日期的前景色和背景色。
.ajax_calendar_other .ajax_calendar_day:非本月日期的樣式名


http://www.bwie.com來(lái)源