17

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

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

4

6 回答 6

17

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

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

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

$(labelselector).click(function() {
    $(inputselector).datepicker('show');
});
于 2009-08-11T18:32:21.217 回答
11

re: 定位问题

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

对我来说，解决方案是将日期选择器附加到 < input type="hidden" .... /> 的文本框这为我解决了所有问题（我将隐藏的输入控件放在标签之前，以便输入控件的偏移量适合我的标签）。

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

此解决方案起作用的原因是由于日期选择器控件源中的子句仅在“类型！=”隐藏“时才执行某些功能。

于 2010-03-15T10:51:56.460 回答
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 中对我来说很好用

于 2009-08-11T18:55:13.137 回答
1

re: 定位问题：

看起来 Datepicker 根据它所定位的元素的偏移量绝对设置它的位置。不幸的是， display: none 元素没有偏移。

两种建议的方法：

1）使用日期选择器自己的方法和您选择的对象的偏移量设置位置。尝试类似：

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;
 }

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

于 2009-08-13T01:12:02.830 回答
1

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

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

于 2014-11-24T14:54:59.560 回答
0

Datepciker 在 input(textbox) 元素上初始化，但根据这个错误，它无法在隐藏输入上初始化。我在 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-29T20:07:12.527 回答