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

Question

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.

Answer 1

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

Answer 2

Instead of using an ID to identify your Input, use a class to identify multiple Inputs

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

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