2011-12-02 81 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> 

當你點擊文本框應顯示日曆,一旦你點擊其他地方窗體上的日曆將被隱藏