修改datepick插件彈出日曆時點擊一個圖標

Question

我在我的網站上使用jQuery的calander插件datepick。我的日期選擇器連接到我的輸入字段這樣的：

$('.dobOnly').datepick(); 

這裏有一個工作示例：jsFiddle

默認情況下，日曆，當用戶點擊輸入彈出。相反，只有當用戶點擊輸入旁邊的圖標時，Id纔會彈出。

它非常重要的提及，我在頁面上有幾個這樣的輸入工作。因此，解決方案似乎可能必須包括修改datepick()以將相關文本字段的ID作爲參數，以便彈出窗口影響預期的輸入。

什麼是最好的編輯方式，我必須做到這一點？

Answer 1

根據文檔，您需要將圖像封裝在隱藏的div中。然後在選項datepick中指定showOnFocus和showTrigger屬性。

HTML

<input type="text" name="gd2" id="gd2"/> 
<div style="display:none"> 
    <img id="calImg" src='https://pnrbuilder.com/_images/cal.png' alt=""/> 
</div> 

JS

$(function() { 
    $('#gd2').datepick({showOnFocus: false, showTrigger: '#calImg'}); 
}); 

的jsfiddle：http://jsfiddle.net/xzzCf/7/

還有就是的invocation標籤上的這樣的一個例子