通過遠程激活JQuery UI日期選擇器按鈕

我使用的是JQuery UI datepicker，但不是將日期選擇器附加到input[type=text]元素，而是將它附加到input[type=hidden]元素。爲了激活datepicker，我在UI上使用了一個遠程按鈕，它不是datepicker所連接的輸入元素的同級。通過遠程激活JQuery UI日期選擇器按鈕

爲了顯示日期選擇器，我使用的是點擊事件，其執行該代碼

$('input.trial_end_date').datepicker('show');

這工作，以顯示日期選擇器，但每當我點擊一個日期，我得到一個未捕獲的JavaScript異常：

Uncaught Missing instance data for this datepicker jquery-ui-1.10.1.custom.min.js:6 
e.extend._getInst jquery-ui-1.10.1.custom.min.js:6 
e.extend._selectDay jquery-ui-1.10.1.custom.min.js:6 
t.selectDay jquery-ui-1.10.1.custom.min.js:6 
v.event.dispatch localhost.local/:5 
o.handle.u localhost.local/:5

但是，如果我改變input[type=hidden]到input[type=text]允許當輸入要素集中的日期選擇器顯示，所有點擊事件觸發沒有任何問題（直到我通過按鈕激活日期選擇器，然後他們一個無論日期選擇器被激活的方式都會失敗）。

是否有更可靠的方式來激活日期選擇器通過遠程按鈕並隱藏日期的輸入元素？我不確定爲什麼會拋出這個異常。

下面是一個不在JSFiddle中工作的示例。雖然，例外情況並不相同。經過進一步研究，我似乎找到了原因，我將在下面的答案中加入。

來源

2013-07-10 Jim Rubenstein

您可以在[JSFiddle]（http://jsfiddle.net/）中複製此問題嗎？ – musefan

爲存檔目的添加了一個JSFiddle鏈接 –

爲什麼你會使用隱藏的輸入，當你可以實例化一個常規div日期選擇器，只是隱藏並顯示該div？如果您不需要輸入，請不要使用它。

<input type="button" id="open" /> 
<div id="datepicker"></div>

$('#datepicker').datepicker(); 

$('#open').on('click', function() { 
    $('#datepicker').toggle(); 
});

FIDDLE

來源

2013-07-10 14:49:21 adeneo

我沒有意識到我可以在像這樣的div中使用它，這當然更好，我認爲。雖然，我猜我使用input元素的原因是，datepicker會自動更新輸入上選擇的日期的值，而不必自己管理它。 –

是的，你可以，它被稱爲「內聯」 - > http://jqueryui.com/datepicker/#inline – adeneo

中的jsfiddle這個問題上浪費了一下後，（http://jsfiddle.net/XJ7Z7/1/），這是顯而易見的是，如果附加的日期選擇器的輸入元素 - 輸入元素必須可見（即不是隱藏的元素）。

原因是Datepicker模塊試圖通過position:absolute;來定位日曆，並且準確地這樣做需要獲取它所連接的輸入元素的頂部/左側偏移量。隱藏的輸入元素沒有頂部/左側偏移量（它被設置爲0/0），因此模塊會跳過該元素以嘗試找到可用於計算日曆放置位置的可見元素。

如果沒有可以使用的同級元素，則參考對象設置爲null，並且當日期選擇器嘗試訪問$(el).offset()的返回對象的左/頂部屬性時會引發異常，因爲對offset的調用返回null值。

在接受的答案中，這裏的解決方案由@adeneo概述，但犧牲的是，您必須通過日期選擇器模塊初始化的回調onSelect來自行管理所選日期的隱藏輸入值。

我希望這可以幫助那些遇到類似問題的人。

來源

2013-07-10 15:22:48

實際上，你仍然可以用文本框和一些CSS來實現它來隱藏它。 [看這個例子]（http://jsfiddle.net/XJ7Z7/2/） – musefan

touche，贏家。 –

通過遠程激活JQuery UI日期選擇器按鈕

回答

相關問題