Question

这是我的问题：

<input type="text" class="datepick1" id="date" />
<input type="text" class="datepick2" id="date" />
<input type="text" class="datepick3" id="date" />

然后我在dom（按类名）

上应用datepicker

$('.datepick1').datepicker();
$('.datepick2').datepicker();
$('.datepick3').datepicker();

=＆GT;三个dom有datepicker但是，onselect date，它会自动更改第一个（datepick1）

HELP

Answer 1

您的三个输入具有相同的id属性。你不能这样做，id属性must be unique within the document。（另一方面，具有相同的name在形式上很好 - 并且很常见，例如对于单选按钮。）

修改因此，发布到以下评论的代码希望更改为：

$('<td></td>').append(
    $(NewLivraison.template.date)
        .val(arguments.date_livraison)
        .attr('id','date_' + arguments.num) // <== Note it's "id" we're making unique
        .addClass('date_' + arguments.num)  // <== You can probably drop this entirely
        .datepicker()
).css('vertical-align','top');

Answer 2

假设是这样的

<input type="text" id="datepick1" class="date" />
<input type="text" id="datepick2" class="date" />
<input type="text" id="datepick3" class="date" />

$('.date').datepicker();

Answer 3

我遇到同样的问题，也许会帮助别人。

只需使用相同的类，并且使用相同的深度它就可以正常工作（至少对我而言）。

Answer 4

就我而言，我在其中一个对话框上有了datepicker控件。该对话框使用Something.cshtml。在此页面上，有一个添加相同类型的子项的规定。因此，父对话框上的对话框也使用相同的cshtml，因此输入的id相同。现在，当我在子对话框中选择日期时，它实际上在父对话框上设置了日期。

我尝试过在每个对话框中指定表单名称...比如

* $("#frmChild .datepicker").datepicker({dateFormat: Globalize.getPatternForDatapicker()});

* $("#frmChild input[id=StartDate]").datepicker({dateFormat: Globalize.getPatternForDatapicker()});

他们都不适合我。在任何一种情况下，它都是在父对话框的控件上设置日期。

Answer 5

问题出在_attachHandlers函数的jquery datepicker代码内。该函数的参数是当前日期选择器“ inst”的实例。正确的输入是inst.input。但是'id'只是一个字符串表示形式，如果您有重复的ID，则永远无法获得正确的输入。一种简单的解决方法是将处理程序函数中的参数“ id”替换为inst.input，这样它将指向正确的输入。

此外，如果您仔细查看处理程序函数的内部，则可以看到它们尝试通过id反向工程以返回正确的输入... 但是，它将使您获得第一个与该id女巫匹配的元素，而不是我们想要的。

var target = $(id),
    inst = this._getInst(target[0]);

随着$（inst.input）返回我们的inst.input，我们可以通过此微小调整轻松修复它。

欢呼

原始jquery代码ui.1.10.3

    _attachHandlers: function(inst) {
        var stepMonths = this._get(inst, "stepMonths"),
            id = "#" + inst.id.replace( /\\\\/g, "\\" );
        inst.dpDiv.find("[data-handler]").map(function () {
            var handler = {
                prev: function () {
                    $.datepicker._adjustDate(id, -stepMonths, "M");
                },
                next: function () {
                    $.datepicker._adjustDate(id, +stepMonths, "M");
                },
                hide: function () {
                    $.datepicker._hideDatepicker();
                },
                today: function () {
                    $.datepicker._gotoToday(id);
                },
                selectDay: function () {
                    $.datepicker._selectDay(id, +this.getAttribute("data-month"), +this.getAttribute("data-year"), this);
                    return false;
                },
                selectMonth: function () {
                    $.datepicker._selectMonthYear(id, this, "M");
                    return false;
                },
                selectYear: function () {
                    $.datepicker._selectMonthYear(id, this, "Y");
                    return false;
                }
            };
            $(this).bind(this.getAttribute("data-event"), handler[this.getAttribute("data-handler")]);
        });
    },

修复，将处理程序函数中的参数“ id”替换为“ inst.input”

    _attachHandlers: function(inst) {
        var stepMonths = this._get(inst, "stepMonths"),
            id = "#" + inst.id.replace( /\\\\/g, "\\" );
        inst.dpDiv.find("[data-handler]").map(function () {
            var handler = {
                prev: function () {
                    $.datepicker._adjustDate(inst.input, -stepMonths, "M");
                },
                next: function () {
                    $.datepicker._adjustDate(inst.input, +stepMonths, "M");
                },
                hide: function () {
                    $.datepicker._hideDatepicker();
                },
                today: function () {
                    $.datepicker._gotoToday(inst.input);
                },
                selectDay: function () {
                    $.datepicker._selectDay(inst.input, +this.getAttribute("data-month"), +this.getAttribute("data-year"), this);
                    return false;
                },
                selectMonth: function () {
                    $.datepicker._selectMonthYear(inst.input, this, "M");
                    return false;
                },
                selectYear: function () {
                    $.datepicker._selectMonthYear(inst.input, this, "Y");
                    return false;
                }
            };
            $(this).bind(this.getAttribute("data-event"), handler[this.getAttribute("data-handler")]);
        });
    },

具有相同ID的多个datepicker问题

5 个答案: