如何調用/綁定jquery datepicker到標簽或div而不是輸入字段

Question

我正在使用此頁面上的jqueryui datepicker - http://jqueryui.com/demos/datepicker/

如何在標簽而不是輸入字段上調用它？ 這可能嗎？

Answer 1

我沒有查看代碼，但我懷疑它假定它附加到<input type="text">元素。

所以假設你必須擁有那個元素。

您可以隱藏<input>並通過調用標簽事件中的方法與datepicker交互。

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

Answer 2

re：定位問題

以上建議對我來說無法獲得干凈的ui。 當人們點擊標簽時我激活了我的日期選擇器控件，我根本不想顯示文本框（上面的css嘗試很接近，但文本框仍然集中在其他問題中）。

我的解決方案是將日期選擇器附加到<input type =“hidden”的文本框.... />這解決了我的所有問題（我把隱藏的輸入控件放在標簽之前，以便輸入控件的偏移量適合我的標簽）。

值得注意的是，將正常輸入控件樣式設置為display：none或visibility：hidden等不起作用。

此解決方案工作的原因是由於datepicker控件源中的子句僅在“type！=”hidden“時才執行某些功能。

Answer 3

您是否嘗試將其綁定以便在點擊時顯示，或者結果填充標簽或Div？ 您可以將其綁定到隱藏文本框，然后將所需的效果綁定到該隱藏字段的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中對我來說很好

Answer 4

re：定位問題：

看起來像Datepicker絕對根據它所針對的元素的偏移來設置它的位置。 不幸的是，display：none元素沒有偏移量。

兩種建議的方法：

1）使用datepicker自己的方法和您選擇的對象的偏移量來設置位置。 嘗試類似的東西：

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

2）嘗試一種隱藏輸入的不同方法，可能是不透明度：0（和IE等效，濾鏡：alpha（opacity = x））。 另一件事可能是設置一堆樣式來減少輸入字段，例如：

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

獲取盡可能接近不可見的輸入，而不實際將其從可見頁面中刪除，它需要存在才能使datepicker從中獲取位置。

Answer 5

我想要一個文本作為我的觸發器。 我通過在display-inline div中輸入輸入來解決這個問題，使用opacity: 0輸入幾乎不可見opacity: 0 ， position: absolute + pointer-events: none 。

請參閱我的示例： http ： //codepen.io/KATT/pen/XJbmVr

Answer 6

Datepciker初始化輸入（文本框）元素，但根據此錯誤，它無法在隱藏輸入上初始化。 我發現了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'];