日期选择器JS：如何使它在多个表单字段上工作 [英] Date picker JS: how to have it work on multiple form fields

问题描述

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

I am using this plugin with WP: http://wordpress.org/plugins/cf7-datepicker-alternative/

.js文件包含以下代码：

The .js file includes this code:

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

有没有人知道如何操作这段代码，以便日期选择器可以在多个字段中运行相同的表格，例如fieldName2和fieldName3以及fieldName1？

Does anyone know how to doctor this bit of code so the date picker will function in multiple fields in the same form, such as fieldName2 and fieldName3 as well as fieldName1?

我提前感谢您的努力。

I thank you in advance for your efforts.

推荐答案

不使用 id 属性，而是指定一个有意义的 class 例如 datepicker 指向您想要使用datepicker的元素。然后更新你的javascript以使用该类选择器。

Instead of using id attribute, assign a meaningful class e.g. datepicker to the elements you want datepicker on. Then update your javascript to use that class selector.

示例：

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

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

更新：

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

If you don't want to use class selectors and would want to use multiple ids, then you could do something like following:

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

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

这篇关于日期选择器JS：如何使它在多个表单字段上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！