2011-12-02 79 views
3

calendarextender problem嗨,如何在失去焦点时隐藏ajaxtoolkit calendarextender?

我想隐藏第一个日历,当第二个日历打开或日历字段失去焦点时。问题是,如果用户没有从日历中选择任何日期并转到页面中的其他控件,则日历不会隐藏,只有当用户选择日历中的任何日期时,弹出窗口才会隐藏。这个捕获显示了这个问题。

我看到在ajaxtoolkit calendarextender示例页面日历控件工作正常,当从一个到另一个日历之前弹出隐藏但我没有找到此页面的示例代码。我觉得这个页面在javascript中管理焦点丢失时的事件,但我发现了任何示例代码或项目...

先谢谢您!

+0

此外,只有当PopupButtonID属性具有图像控件值时才会出现此问题。如果我没有任何图像按钮为了打开日历弹出其重点丢失时正确隐藏。 – Camacho

+2

你可以用'ImageButton'而不是'Image'来控制弹出按钮吗? –

+0

你可以试试这个希望它会有所帮助http://stackoverflow.com/questions/15883797/calendarextender-not-getting-hide-on-clicking-outside-the-calendar – Sapnandu

回答

2

当Yuri提到,使用的ImageButton修复了这个......或者......

您需要处理的onmouseout事件。你可以这样来做:

http://forums.asp.net/p/1182269/4708411.aspx/1?Re+Calendarextender+and+Lose+Focus+Or+Mouse+Out

或者你也可以添加一些JavaScript(通过jQuery),注入的onmouseout事件:

Adding extra functions to an image's onmouseout attribute

这也显示在forums.asp .net链接,但基本上,在onmouseout事件中,您可以将日历扩展程序的可见性设置为隐藏或无。

+0

非常感谢短跑和Yuiry!只有我替换ImageButton控件的图像,并且工作正常! – Camacho

2

如上所述,除了通过破折号提供的解决方案的选择,你可以使用以下的决定,如果你不想使用ImageButton而不是Image为弹出式按钮:设置扩展OnClientShowing属性"hideAnotherOpenedPoups",并添加到网页脚本下面。

// Array of BehaviorIds of each extender for those you use Image as PopupButton 
var behaviorIds = ["CalendarExtender1", "CalendarExtender2"]; 

function hideAnotherOpenedPoups(sender) { 
    for (var index = 0; index < behaviorIds.length; index++) { 
      if (behaviorIds[index] !== sender.get_id()) { 
       var extender = $find(behaviorIds[index]); 
       if (extender.get_isOpen()) { 
        extender.hide.call(extender); 
       } 
      } 
    } 
} 
1

尝试下面的代码行,显示在两个文本框和图片点击日历。

<asp:TextBox runat="server" onclick="showCalendar();" onfocusout="showCalendar();" ID="txtDate" /> 
    <asp:ImageButton runat="Server" ID="imgPopup" AlternateText="Click to show calendar" /> 
    <cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" CssClass="MyCalendar" Format="MMMM d, yyyy" PopupButtonID="imgPopup" /> 

并添加JavaScript函数这样

<script type="text/javascript"> 
     function showCalendar() { 
     $("#<%=imgPopup.ClientID %>").trigger("click"); //I've used .ClientID here just in case your page is inherited from a Master page 
    } 
    </script> 

当你点击文本框应显示日历,一旦你点击其他地方窗体上的日历将被隐藏