日期选择器应用于错误的字段。

Question

我遇到了一些jQuery UI日期选择器的问题。 事情是这样的，我有一个页面和一些输入框，就像这样:

blabla | blabla | .date-picker | blabla
blabla2 | blabla2 | .date-picker | blabla2
blabla3 | blabla3 | .date-picker | blabla3

所以，“blabla”只是一些文本，“.date-picker”是一个具有“date-picker”类的输入框。

在我的JavaScript代码中，我只有以下内容：

$(function() {
    $('.date-picker').datepicker();
});

举个例子，如果我点击"blabla3"这一行的输入框，它总是更新第一个输入框而不是更新正确的那一个...

我的多个输入框都有相同的id (我无法改变)，但我使用输入框的类作为选择器，因此它应该有效，但实际上并没有。

- user1506157

---

拥有多个具有相同ID的元素是无效的，如果您选择这样做，我们将无法控制任何内容的行为。 - sevenseacat

Answer 1

你好，虽然这篇文章有些旧了，但是对于那些仍然面临这个问题的人来说还是很有用的...

只需删除新输入框的 id 即可解决问题。日期选择器总是会生成一个新的 id，即如果该输入框没有一个。如果它已经有了一个，日期选择器将保留它，这意味着第一个输入框被克隆，最后一个也将被更新。

- douxsey

---

测试过了，没问题。一旦我删除了ID字段，日期选择器就会生成一个唯一的编号。非常感谢！ - sMyles

这里的重要信息是，如果输入框没有ID，日期选择器会“生成一个新的ID”。如果页面在加载时即使动态创建了日期选择器字段，这不是问题，但是如果在页面加载后添加了日期选择器元素，则选择将进入错误的字段。删除在动态创建过程中被复制的不必要的输入ID字段可以解决该问题 - 我只希望我能回到最后一天，试图找出问题所在 :-) - user6743474

Answer 2

你需要更改输入框的ID，否则它将无法正常工作。因为当你选择任何日期时，它使用 DP_jQuery_1347006322116.datepicker._selectDay('#same',8,2012, this);return false; 这个函数来选择日期，并且它会获取输入框的ID。

所以如果你有多个ID，它将选择第一个输入框并在那里设置日期。

- Yograj Gupta

---

谢谢您清晰的解释！如果我不改变ID，真的没有办法做到这一点吗？因为如果我更改输入的ID，表单后面的PHP代码将完全改变...之前在我的页面上，我使用日期选择器仅选择年份和月份，使用此代码：http://pastebin.com/rnDSKnvp 它运行得很好。以上代码是否有添加日期的解决方案？ - user1506157

Answer 3

我曾遇到一个类似的问题，我使用JavaScript动态添加新的DIV容器，并使用相同的ID标记来包含日期字段。在我的情况下，解决这个问题的唯一方法是动态重写所有ID，然后销毁/创建日期选择器功能。

var n=0;    
$("[id*='blabla']").each(function(){
    n++;
    tempField = this.id.split("-");
    this.id = tempField[0]+"-"+n;
    });

// first remove datepicker functionality since renaming of id above then            
// add datepicker to any field with "datepicker" as class   

    $("input.datepicker").datepicker("destroy").datepicker();

我修改了上面的内容以适应你的使用场景（我认为）。希望这可以帮到你。

顺便说一句：我将其按破折号("-")拆分的原因是，这样我就可以在每次动态创建具有日期选择器字段的另一个DIV容器时调用此函数。它将系统地按顺序重命名所有的ID，以便进行后续的表单处理。

- Sparebrain

---

哎呀，我差点因为它的“hack-the-core”本质和丑陋的代码而要给它投反对票...哈哈。我认为肯定有更好的方法，对这种实现方式并不满意。 - blamb

这对我有用，但只有在我把destroy/create放在$('.datepicker').each(function()中之后才有效。也就是说，我需要为所有的日期输入框销毁并重新创建。 - amchugh89