使用CalendarExtender

为了演示CalendarExtender丰富的使用方法，本例子一共使用了两个TextBox控件、一个Image控件和两个CalendarExtender组件。我会通过两个TextBox演示CalendarExtender两种不同的使用方法。我们将以上控件都拖进设计界面，代码如下：

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>        
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"></ajaxToolkit:CalendarExtender>        
<br />        
<br />        
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Image ID="Image1"ImageUrl="~/Calendar_scheduleHS.png"  runat="server" />        
<ajaxToolkit:CalendarExtender ID="CalendarExtender2" runat="server"></ajaxToolkit:CalendarExtender>

当然我们还需要准备一个简单的样式表，让Calendar显得更漂亮，具体代码如下所示：

.MyCalendar .ajax__calendar_container 
{   
 border:1px solid #646464;   
 background-color: lemonchiffon;   
 color: red;
}
.MyCalendar .ajax__calendar_other .ajax__calendar_day,.MyCalendar .ajax__calendar_other .ajax__calendar_year 
{  
 color: black;
}
.MyCalendar .ajax__calendar_hover .ajax__calendar_day,.MyCalendar .ajax__calendar_hover .ajax__calendar_month,.MyCalendar .ajax__calendar_hover .ajax__calendar_year 
{    
 color: black;
}

.MyCalendar .ajax__calendar_active .ajax__calendar_day,.MyCalendar .ajax__calendar_active .ajax__calendar_month,.MyCalendar .ajax__calendar_active .ajax__calendar_year 
{    
 color: black;
 font-weight:bold;
}

注意：以上样式套用了页面输出客户端后系统为Calendar自动生成的ID，大家不需要理解这部分代码，只需要按照相应的位置设置好风格就可以了。

第二步：设置CalendarExtender

由于我演示了CalendarExtender的两种用法，因此设置有两种，但差别不大，具体代码如下所示：

<ajaxToolkit:CalendarExtender ID="CalendarExtender21" TargetControlID="TextBox1" CssClass="MyCalendar" runat="server">
</ajaxToolkit:CalendarExtender>
<ajaxToolkit:CalendarExtender CssClass="MyCalendar" Format="yyyy-MM-dd" ID="CalendarExtender2" runat="server" TargetControlID="TextBox2" PopupButtonID="Image1"></ajaxToolkit:CalendarExtender>

CalendarExtender1是最基本用法，我们直接把它的TargetControlID设为TextBox1，当TextBox1获得焦点时，CalendarExtender1就会自动展开，直到TextBox1失去焦点为止。而CalendarExtender2的用法有些特别，它比CalendarExtender1多了个PopupButtonID属性，值为Image1。它指我们可以通过点击Image1来激活CalendarExtender2控件，但选择完日期后，值还是返回到TargerControl即TextBox2那里。当选择完日期后，CalendarExtender2会自动消失。同时我们还定义了时间的显示格式，Format="yyyy-MM-dd"。

 

备注：设置TextBox的Enabled=false,直接在前台编写Enabled属性是无效的，需要在后台添加属性：

protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
       this.TextBox1.Attributes.Add("ReadOnly", "true"); 
   } 
}