CODEWITHSUNDEEP
javascriptjquery-ui-datepicker
Ericjt
Ericjt

Reputation: 105

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

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.

Upvotes: 3

Views: 10139

Answers (2)

vee
vee

Reputation: 38645

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

Upvotes: 6

mechenbier
mechenbier

Reputation: 3067

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

Upvotes: 0

Related Questions