日期选择器 JS：如何让它在多个表单字段上工作答案

【问题标题】：Date picker JS: how to have it work on multiple form fields日期选择器 JS：如何让它在多个表单字段上工作
【发布时间】：2013-08-20 04:11:15
【问题描述】：

我在 WP 中使用这个插件： http://wordpress.org/plugins/cf7-datepicker-alternative/

.js 文件包含以下代码：

jQuery(document).ready(function($) {
  $('#fieldName1').datepicker({
     autoclose: true
  });
});

有谁知道如何修改这段代码，以便日期选择器可以在同一表单的多个字段中运行，例如 fieldName2 和 fieldName3 以及 fieldName1？

我提前感谢您的努力。

【问题讨论】：

标签： javascript jquery-ui-datepicker

【解决方案1】：

不要使用id 属性，而是分配一个有意义的class，例如datepicker 到您希望使用日期选择器的元素。然后更新您的 javascript 以使用该类选择器。

例子：

<!-- HTML -->
<input type="text" id="fieldName1" class="datepicker" />
<input type="text" id="fieldName2" class="datepicker" />

// jQuery
jQuery(document).ready(function($) {
  $('.datepicker').datepicker({
     autoclose: true
  });
});

更新：

如果您不想使用类选择器并且想使用多个ids，那么您可以执行以下操作：

<!-- HTML -->
<input type="text" id="fieldName1" />
<input type="text" id="fieldName2" />

// jQuery
jQuery(document).ready(function($) {
  $("#fieldName1, #fieldName2").each(function() {
     $(this).datepicker({
       autoclose: true
     });
  });
});

【讨论】：

这可行，但我不能分配一个只针对日期字段的类。生成表单的插件会自行设置所有内容，并且日期字段没有唯一的类。有没有办法使用多个字段名称，例如 $('#fieldName1','#fieldName2').datepicker({ 等等？
@ericjt，是的，这也是可能的，但是语法与您在评论中的语法略有不同。请查看更新的答案。
好吧，它没有用。我还尝试在字段名称周围使用单引号，以及每个名称都有自己的一组单引号，然后是双引号。只有第一个字段名称显示日期选择器（适用于所有变体）。我的一个朋友说它可能需要一个循环才能工作，但他没有空。我们再试一次好吗？
@Ericjt，我刚刚看到在ids 中我有领先的#，我已经删除了它们。您是否尝试过使用# 的答案？您的朋友正在谈论的循环是此答案中的each。你可以试试这个吗？
我完全恢复了您的循环版本，并从两个字段名称中删除了 # 并且根本不起作用。对不起。

【解决方案2】：

不要使用 ID 来识别您的输入，而是使用一个类来识别多个输入

<input id="fieldName1" class="datefield" />

$('.datefield').datepicker({
   autoclose: true
});

【讨论】：

我不能使用一个类，因为它们在这个表单中的字段之间不是唯一的。日期选择器会出现在我不想要的地方。