Ajax Toolkit 控制項學習系列(5) ——CalendarExtender使用

 

　　Toolkit中給我們提供了很漂亮的CalendarExtender，而且我們還可以通過CSS自訂其顯示的樣式。今天簡單學習下這個控制項的簡單使用。

　　還是先看效果。

　　

　　首先，提示輸入textbox中的內容，然後點擊button按鈕。

　　

　　隨後彈出來日曆選項，如所示，沒什麼好說的。

　　

　　選擇自己的需要，然後返回一個日期到textbox中。

　　在這例子中。使用的控制項是一個label，一個textbox，一個button。

　　Ajax中的介紹過的TextBoxWatermarkExtender，和將要介紹的，CalendarExtender。

　　TextBoxWatermarkExtender不用多說，用來控制textbox顯示之前的內容。而CalendarExtender的TargetControlID自然是textbox，而PopupButtonID是指那個按鈕觸發彈出的日曆，我們也可以選擇一個自己喜歡需要的圖片來代替，更加好看。CSS可以用來控制其樣式的，鄙人水平有限，大家自己發揮吧。

　　後台也沒有什麼代碼，前台一起分享。

　　

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lb_date" runat="server" Text="Input your birth:"></asp:Label>
<asp:TextBox ID="tb_date" runat="server" Text=""></asp:TextBox>
<asp:Button ID="btn" runat="server" Text="choose" />
<ajax:TextBoxWatermarkExtender ID="water_tb" runat="server" TargetControlID="tb_date"
                    WatermarkText="choose date" WatermarkCssClass="textbox">
</ajax:TextBoxWatermarkExtender>
<ajax:CalendarExtender ID="ce_tb" runat="server" TargetControlID="tb_date" PopupButtonID="btn"
                    Format="MM-d-yyyy" CssClass="cal">
</ajax:CalendarExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>