在线订房系统中有这样的功能:单击入住日期文本框,弹出一个日历,由用户选择入住日期,选定后,日历关闭,选定的日期显示在文本框内。
这个功能,使用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控件才可以工作,否则不能工作。