Date picker JS: how to have it work on multiple form fields

javascript, jquery-ui-datepicker

Solution

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.

Example:

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

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

Update:

If you don't want to use class selectors and would want to use multiple `id`s, 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
     });
  });
});

Problem

I am using this plugin with WP: http://wordpress.org/plugins/cf7-datepicker-alternative/ The .js file includes this code: ``` jQuery(document).ready(function($) { $('#fieldName1').datepicker({ autoclose: true }); }); ``` 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.

Original source