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>