JQuery 日期选择器 - 在多个字段中显示日期

Question

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

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

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

Answer 1

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

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

使用 class

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

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

作为目标

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

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

Answer 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

JQuery 日期选择器 - 在多个字段中显示日期

JQuery Datepicker - displaying date in several fields

javascript

jquery

date

datepicker