JQuery Datepicker - 在多个字段中显示日期答案

【问题标题】：JQuery Datepicker - displaying date in several fieldsJQuery Datepicker - 在多个字段中显示日期
【发布时间】：2015-04-29 11:56:01
【问题描述】：

我有一个包含多个活动的列表，我希望 jQuery Datepicker 在每一行的字段中显示日期。目前我可以在第一行显示日期，但似乎它一次只会显示在一个 id="date" 的字段中。每行中的字段如下所示：

<td><input id="date" name="date" /></td>

那么，我想知道的是：有没有办法可以在每个输入字段中显示日期，id="date"？

【问题讨论】：

标签： javascript jquery date datepicker

【解决方案1】：

ids 在页面上必须是唯一的。请改用类来识别元素。

原因是浏览器维护一个 id 值与元素的快速查找字典，并且字典中每个值只有一个可用条目。

使用类

<td><input class="date" name="date" /></td>

并使用$(".date").datepicker();而不是$('#date').datepicker()定位

JSFiddle: http://jsfiddle.net/TrueBlueAussie/D4AGz/485/

【讨论】：

现在完美运行。非常感谢！

【解决方案2】：

按照@TrueBlueAussie 所说，您可以这样做：

$( ".your_class" ).each(function() { //You access all your elements with the class "your_class"
  //Do STG, you can access the current element with $(this)
});

【讨论】：

除非实际需要特定实例，否则您通常不会将 each 与 jQuery 一起使用。大多数插件都可以在返回集合的选择器结果中正常工作。
我的意思是，这是一种可能性
当然，但除非特别需要，否则不要鼓励在 jQuery 中使用 each。

【解决方案3】：

作为替代方案，以您的列表为例

<ul id="listDisp">
    <li>
        Activity 1<input type="text" id="datePicker1"/>
    </li>
    <li>
        Activity 2<input type="text" id="datePicker2"/>
    </li>
    <li>
        Activity 3<input type="text" id="datePicker3"/>
    </li>    
</ul>

你的 js 会是

$("#listDisp").find('input').datepicker();

或

$("#listDisp input").datepicker();

这里是FIDDLE

【讨论】：