Question

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

如何在标签而不是输入字段上调用它？这可能吗？

Answer 1

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

所以假设你必须拥有那个元素。

您可以隐藏<input>并通过调用标签事件中的方法与日期选择器进行互动。

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

Answer 2

re：定位问题

以上建议对我来说无法获得一个干净的用户界面。当人们点击一个标签时，我的datepicker控件被激活了，我根本不想显示文本框（上面的css尝试很接近，但文本框仍然集中在其他问题中）。

我的解决方案是将日期选择器附加到＆lt;的文本框。输入类型=“隐藏”.... /＆gt;这解决了我的所有问题（我把隐藏的输入控件放在标签之前，以便输入控件的偏移量适合我的标签）。

值得注意的是，将正常输入控件样式设置为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，position: absolute + pointer-events: none输入几乎不可见，解决了这个问题。

请参阅我的示例：http://codepen.io/KATT/pen/XJbmVr

Answer 6

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'];

如何调用/绑定jquery datepicker到标签或div而不是输入字段

6 个答案: