logo标签列表

如何将jQuery日期选择器绑定到标签或div而不是输入字段

javascriptjquerydatepicker
17
6个回答
17

我没有查看代码，但我怀疑它假定与一个<input type="text">元素相关联。

因此，请假设您必须拥有该元素。

您可以隐藏<input>并通过从标签事件调用其方法与日期选择器交互。

$(labelselector).click(function() {
    $(inputselector).datepicker('show');
});
1
我遇到了问题 - 如果输入字段设置为隐藏（display:none），则日历似乎会在页面的左上角弹出 - 有什么想法吗？ - stringo0
1
将输入字段放在一个 div 中，并定位该 div。 - Mark Schultheiss
11

关于定位问题

以上建议对我来说无法实现干净的UI。当人们点击标签时，我需要激活我的日期选择器控件，而我不想显示文本框（上面的CSS尝试已经接近了，但仍然存在文本框获得焦点等其他问题）。

对我来说最好的解决方案是将日期选择器连接到的文本框更改为。这为我解决了所有问题（我将隐藏的输入控件放在标签之前，以使标签的偏移量正确）。

值得注意的是，将普通输入控件的样式设置为display:none或visibility:hidden等并不能解决问题。

这个解决方案之所以起作用，是因为日期选择器控件源代码中的子句仅在"type != 'hidden'"时执行某些功能。

6
你是想绑定它，以便在单击时显示，还是使结果填充到标签或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中，这对我很好用。

我希望代码能够实现您目前写的功能，但是我希望这个功能在标签被点击时触发（不需要按钮，只需要点击标签本身）。 - stringo0
为此，去掉datepicker参数（showOn，buttonText），并在标签点击时为#datepicker注册focus()。我已将更新后的代码添加到我的原始答案中。这样，对#datepicker的焦点将启动日历并填充隐藏的文本框。在更改文本框时，您可以填充标签。 - shanabus
1

关于定位问题：

看起来Datepicker会根据其目标元素的偏移量绝对设置其位置。不幸的是，display:none元素没有偏移量。

有两种建议的方法：

1）使用datepicker自己的方法和您选择的对象的偏移量来设置位置。尝试类似以下的内容：

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

2) 尝试使用不同的隐藏输入方法，例如 opacity: 0（以及它的 IE 等效 filter:alpha(opacity=x)）。另一个尝试的方法可能是设置一堆样式来减小输入字段的大小，例如：

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

尽可能使输入框在可见页面上不可见，但实际上不要将其从可见页面中删除，因为日期选择器需要从中获取位置。

是的，还要将输入文本的填充设置为0像素：padding: 0px。 - feder
1
我希望一个文本可以作为我的触发器。我通过在display-inline div中放置一个输入框，并使用opacity: 0, position: absolute + pointer-events: none让该输入框在视觉上不可见来解决这个问题。
请参见我的示例：http://codepen.io/KATT/pen/XJbmVr
0

日期选择器初始化在输入（文本框）元素上，但根据此错误，它无法在隐藏的输入上初始化。我在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'];
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接