如何調用/ jQuery的日期選擇器綁定到一個標籤或DIV，而不是輸入字段

我與jQueryUI的日期選擇此頁面上的工作 - http://jqueryui.com/demos/datepicker/如何調用/ jQuery的日期選擇器綁定到一個標籤或DIV，而不是輸入字段

我如何把它的標籤上，而不是輸入的領域？這可能嗎？

2009-08-11 stringo0

我還沒有看過代碼，但我懷疑它假定它連接到<input type="text">元素。

因此，假設你必須擁有該元素。

您可以隱藏<input>並通過調用其標籤事件中的方法與日期選擇器進行交互。

$(labelselector).click(function() { 
    $(inputselector).datepicker('show'); 
});

來源

2009-08-11 18:32:21

這沒有把戲！謝謝 – stringo0 2009-08-11 20:02:01

我遇到了麻煩 - 如果輸入字段設置爲隱藏（顯示：無），日曆似乎彈出在頁面的左上角 - 任何想法？ – stringo0 2009-08-11 20:18:18

將輸入字段放在一個div中，並將div的位置設置爲 – 2010-03-15 11:03:54

您是否試圖綁定它，使其顯示在點擊或左右，結果填充標籤或分區？您可以將其綁定到隱藏文本框，然後將所需的效果綁定到該隱藏字段的change（）事件。

$(function() { 
     $("#datepicker").datepicker(); 

      $("#alternate").click(function() { 
       $("#datepicker").focus(); 
      }); 

     $("#datepicker").change(function() { 
      $("#alternate").html($("#datepicker").val()); 
     }); 
    }); 

<input id="datepicker" style="display:none" /><label id="alternate">change me</label>

這在Firefox的工作對我罰款3.5

來源

2009-08-11 18:55:13 shanabus

我希望它能夠在您的代碼中執行它的操作，除非我希望它在單擊標籤時執行此操作（沒有按鈕，而是單擊標籤本身） – stringo0 2009-08-11 19:57:40

這樣，在點擊標籤時，去掉datepicker參數（showOn，buttonText）併爲#datepicker註冊focus（）。我已將更新後的代碼添加到我的原始答案中。這樣，專注於#datepicker將啓動日曆並填充隱藏的文本框。在更改文本框時，填充標籤。 – shanabus 2009-08-12 19:21:26

重：定位問題：

它看起來像日期選擇器設置絕對的地位，基於它的定位元素的偏移量。不幸的是，display：none元素沒有偏移量。

兩個建議的方法：

1）使用日期選擇自己的方法設置的位置和您選擇的對象的偏移。嘗試類似：

offset = $('myinput').parent('label').offset(); 
$('#date-picker').dpSetOffset(offset.left, offset.top);

2）嘗試隱藏了輸入，可能像不透明度的不同方法：0（和它的等效IE，濾波器：α（不透明度= X））。另一件事嘗試可能設置了一堆的風格，以減少輸入字段，如：

.my_input { 
    border: 0; 
    line-height: 0; 
    font-size: 0; 
    height: 0; 
    overflow: hidden; 
}

獲取輸入接近無形儘可能不真正從可見的頁面，它必須存在於消除它爲了datepicker從中獲得一個位置。

來源

2009-08-13 01:12:02

感謝您的建議！ – stringo0 2009-08-14 19:38:39

是的，還將輸入文本的填充設置爲0px：'padding：0px'。 – feder 2013-09-07 13:42:16

回覆：定位問題

，我得到一個乾淨的UI以上建議沒有工作。當人們點擊一個標籤時，我激活了我的日期選擇控件，並且我不希望顯示文本框（上面的CSS嘗試很接近，但文本框仍然在其他問題中獲得了關注）。

對我來說，解決方案是讓datepicker連接到< input type =「hidden」.... />這個解決了所有問題（我把隱藏的輸入控件放在標籤以便輸入控件的偏移量適合我的標籤）。

值得注意的是，設置一個正常輸入控制樣式顯示：無，或可見性：隱藏等無法正常工作。

此解決方案工作的原因是由於datepicker控件的源中的條款只在「type！=」hidden「時才執行某些功能。

來源

2010-03-15 10:51:56

這對我來說確實有效（輸入隱藏）。謝謝。 – stej 2010-09-07 10:33:51

Datepciker初始化輸入（文本框）元素，但根據this bug它不能初始化隱藏的輸入。我找到了竅門，在jQueryUI的一個位源變化：

_findPos: function(obj) { 
    var inst = this._getInst(obj); 
    var isRTL = this._get(inst, 'isRTL'); 
    while (obj && (obj.type == 'hidden' || obj.nodeType != 1 || $.expr.filters.hidden(obj))) { 
     obj = obj[isRTL ? 'previousSibling' : 'nextSibling'] || obj.parentNode; 
    }

變化在這裏

obj = obj[isRTL ? 'previousSibling' : 'nextSibling'];

來源

2012-12-29 20:07:12 Yara

我想要一個文本作爲我的觸發器。我解決了這個問題，在display-inline div內有一個輸入，輸入內部幾乎不可見，使用opacity: 0,position: absolute + pointer-events: none。

看我的例子在這裏：http://codepen.io/KATT/pen/XJbmVr

來源

2014-11-24 14:54:59 Alex

如何調用/ jQuery的日期選擇器綁定到一個標籤或DIV，而不是輸入字段

回答

相關問題