Ajax Control Toolkit CalendarExtender not closing when form body clicked

I am trying to simply have the calendar clo开发者_如何学Cse when a user clicks anywhere on the page. I have downloaded the most recent version of the toolkit and I can not get this functionality to work. I am not sure if I am missing a property but the functionality works as expected on the asp.net sample toolkit page.

Here is the code:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>


<asp:TextBox ID="txtTest" runat="server" /><img runat="server" alt="Calendar" id="imgCalFrom" align="absmiddle" border="0" height="16" src="/global/images/glo_btn_cal.gif" width="21"/>
    <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtTest" PopupButtonID="imgCalFrom">
    </asp:CalendarExtender>

Don't use <img .,. />. Use <input type="image" .../> instead. Or you can use <asp:ImageButton runat="Server" .../>. This will fix your problem.

There is some issue in the Toolkit that keeps it from working with an asp:Image, but works as expected with an asp:ImageButton. It should close the picker if you click outside of it.

As a best practice we always use a calendar icon to pop up the picker instead of when the textbox is clicked. Some users prefer typing dates in and popping the picker up every time they click a textbox is unexpected and unwanted.

Remove the PopupButtonID="imgCalFrom" from the extender. That should fix it. This PopupButtonID assigns a button callback. You have to click the image again or selecting a date in order to close the calendar.