使用Ajax控件CalendarExtender完成单击文本框弹出日历功能[转]
2013-02-19 18:40 neohdy 阅读(365) 评论(0) 编辑 收藏 举报在线订房系统中有这样的功能：单击入住日期文本框，弹出一个日历，由用户选择入住日期，选定后，日历关闭，选定的日期显示在文本框内。
这个功能，使用ASP.NET工具箱中标准选项卡内的Calender控件不易完成（你可以试一试），因为文本框控件没有Click事件，所以无法对其编程调用Calender控件；当然使用JS编程是一个不错的解决方案，但毕竟编写代码较多，使用Ajax控件可以轻松地完成这个工作，完成后的效果如图：
单击文本框，在文本框下方弹出日历
用户使用鼠标单击选定9月29日后，日历关闭，选定日期显示在文本框内，日期格式为yyyy-MM-dd，即年-月-日
制作步骤（使用Visual Studio 2008）：
1. 在aspx网页的【设计】视图中，拖放一个文本框控件到网页，命名为txtCheckIn;
2. 单击该文本框的智能标签，单击【添加扩展程序...】，出现【扩展程序向导】对话框，选择【CalendarExtender】（如下图），单击【确定】；
3. 这里从设计视图上看，文本框没有什么外观上的变化，因为CalendarExterder控件在设计视力不可见，单击下部的【源】选项卡进入源视图，找到如下的代码：
<cc1:CalendarExtender ID="txtCheckIn_CalendarExtender" runat="server"
Enabled="True" TargetControlID="txtCheckIn">
4. 在该部分代码内任意单击（保证光标插入符在这里边即可），在属性窗口，将CalendarExtendar控件的Format属性设置为“yyyy-MM-dd”，注意MM一定要大写，这种日期格式符合中国人的使用习惯，这个日期格式将是选中日期后显示在文本框内的日期；同样，可以把属性中的DaysModeTitleFormat（日历头部标题的日期格式）及TodaysDateFormat（日历底部当天日期格式）都一并设置为“yyyy-MM-dd”
5. 拖放ScriptManager控件（在工具箱【Ajax Extensions】选项卡内）到<body>容器的最上方，最终形成的代码如下（粗体部分为第2步到第5步操作形成内容）：
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<p>
<asp:TextBox ID="txtCheckIn" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="txtCheckIn_CalendarExtender" runat="server"
Enabled="True" Format="yyyy-MM-dd" TargetControlID="txtCheckIn">
</cc1:CalendarExtender>
</p>
</form>
</body>
6. 保存文件并运行，完成任务！
说明：如果确定网页要使用Ajax控件，第5步最好一开始就做，有了ScriptManager，其它Ajax控件才可以工作，否则不能工作。
