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

Posted 2023-05-07

【中文标题】如何将 jquery datepicker 调用/绑定到标签或 div 而不是输入字段

【英文标题】：How to call/bind a jquery datepicker to a label or div instead of an input field

【发布时间】：2010-11-18 17:26:24

【问题描述】：

我正在此页面上使用 jqueryui 日期选择器 - http://jqueryui.com/demos/datepicker/

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

【参考方案1】：

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

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

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

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

【讨论】：

我遇到了麻烦 - 如果输入字段设置为隐藏（显示：无），日历似乎会在页面的左上方弹出 - 有什么想法吗？跨度>

将输入字段放在一个div中并定位该div

【参考方案2】：

re: 定位问题

上述建议对我来说并没有得到一个干净的用户界面。当人们单击标签时，我的日期选择器控件被激活，我根本不希望显示文本框（上面的 css 尝试很接近，但文本框仍然是其他问题的焦点）。

对我来说，解决方案是将日期选择器附加到 这为我解决了所有问题（我将隐藏的输入控件放在标签，以便输入控件的偏移量适合我的标签）。

值得注意的是，将普通输入控件样式设置为 display: none 或 visibility: hidden 等不起作用。

此解决方案有效的原因是日期选择器控件源中的子句仅在“type !=”hidden“时才执行某些功能。

【参考方案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 中对我来说效果很好

【讨论】：

我希望它在您的代码中执行它正在执行的操作，但我希望它在单击标签时执行此操作（没有按钮，而是单击标签本身）

为此，去掉 datepicker 参数（showOn、buttonText）并在点击标签时为 #datepicker 注册 focus()。我已将更新的代码添加到我的原始答案中。这样，专注于#datepicker 将启动日历并填充隐藏的文本框。在更改文本框时填充标签。

【参考方案4】：

re: 定位问题：

看起来 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;
 

让输入尽可能接近不可见，而无需实际将其从可见页面中删除，它需要存在于可见页面上，以便日期选择器从中获取位置。

【讨论】：

是的，同样将输入文本的内边距设置为0px：padding: 0px。

【参考方案5】：

我想要一个文本作为我的触发器。我通过在display-inline div 中输入来解决这个问题，使用opacity: 0、position: absolute + pointer-events: none 使输入在内部几乎不可见。

在此处查看我的示例：http://codepen.io/KATT/pen/XJbmVr

【参考方案6】：

Datepciker 在 input(textbox) 元素上初始化，但根据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'];