日期控件CalendarExtender的使用

两种用法：

1. textbox后边不带image按钮，当textbox获得焦点时，出现CalendarExtender，选择日期后，CalendarExtender并不隐藏。焦点移出后，CalendarExtender才隐藏。

<asp:TextBox runat="server" ID="Date2" autocomplete="off" /><br /> <ajaxToolkit:CalendarExtender ID="customCalendarExtender" runat="server" TargetControlID="Date2" CssClass="MyCalendar" Format="MMMM d, yyyy" />

 

2. textbox后边带image按钮，当textbox获得焦点时，不出现CalendarExtender，点击image按钮时才出现CalendarExtender。 选择日期后，CalendarExtender隐藏。选择日期前焦点移出，CalendarExtender不隐藏。

<asp:TextBox runat="server" ID="Date5" /> <asp:ImageButton runat="Server" ID="Image1" ImageUrl="Calendar_scheduleHS.png" AlternateText="Click to show calendar" /><br /> <ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server" TargetControlID="Date5" PopupButtonID="Image1" />

 

上边两种用法都存在问题，我们习惯的操作是：

textbox获得焦点或者点击image按钮时，CalendarExtender显示。失去焦点或者选择日期后，CalendarExtender隐藏。

如果想达到这个效果，可以在服务端的OnLoad事件中添加下边这段代码。

protected override void OnLoad(EventArgs e) { Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "hideCalendar", @"function hideCalendar(cb) { cb.hide(); }", true); base.OnLoad(e); }

同时，在设置CalendarExtender的OnClientDateSelectionChanged=“hideCalendar”即可