具有相同ID的多个datepicker问题

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();

=>三个dom有datepicker但是,onselect date,它会自动更改第一个(datepick1)

救命

Answer 1

您的三个输入具有相同的id属性.您不能这样做,id属性在文档中必须是唯一的.(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

问题出在 _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")]);
        });
    },