Question

I have two datepickers with different id and name. Can I merge them both and remove the redundant code?

     <script>
    jQuery(function() {
      jQuery( "#<portlet:namespace/>other_date" ).datepicker({
           showOn: "button",
           buttonImage: "/html/themes/control_panel/images/common/calendar.png",
           buttonImageOnly: true,
           changeMonth: true,
           changeYear: true
       });
      jQuery( "#<portlet:namespace/>bene_relation_birth_date").datepicker({
          showOn: "button",
          buttonImage: "/html/themes/control_panel/images/common/calendar.png",
          buttonImageOnly: true,
          changeMonth: true,
          changeYear: true
      })
});
</script>

…

<input type="text" name="other_date" label="" value=""
                    id="other_date"></input>


 <input type="text" name="bene_relation_birth_date" label="" value=""
                    id="bene_relation_birth_date"></input>

Answer 1

You can select both elements at once and then loop over them with .each(). Within the loop you apply the datepicker to each element you have selected. You can use the this keyword to access the current element in the loop.

Something like this:

var selector = "#other_date, #bene_relation_birth_date";

jQuery(selector).each(function(i, elm) {
   jQuery(this).datepicker({
      showOn: "button",
      buttonImage: "/html/themes/control_panel/images/common/calendar.png",
      buttonImageOnly: true,
      changeMonth: true,
      changeYear: true
  });
});