title: jQuery UI DatePicker split to multiple dynamic fields
body: <p>I have forms that repeat date fields in using 3 separate fields for month, day and year. I hve it so it splits the date into the 3 fields but the one big issue is the at the system renders multiple date pickers on the form and i CAN NOT change the html or form field classes for the month day and year fields. How can i make it so we can use one surrounding div class and it updates only the date fields in each date-picker div group?</p>
  
  <p>Example HTML:</p>
  
  <pre><code>&lt;div class="date-picker"&gt;
   &lt;label for="preferredDate"&gt;Date&lt;/label&gt;
   &lt;input type="text" class="date_month" /&gt;/
   &lt;input type="text" class="date_day" /&gt;/ 
   &lt;input type="text" class="date_year" /&gt; 
  &lt;/div&gt;
  &lt;div class="date-picker"&gt;
   &lt;label for="preferredDate"&gt;Date&lt;/label&gt;
   &lt;input type="text" class="date_month" /&gt;/
   &lt;input type="text" class="date_day" /&gt;/ 
   &lt;input type="text" class="date_year" /&gt; 
  &lt;/div&gt;
  &lt;div class="date-picker"&gt;
   &lt;label for="preferredDate"&gt;Date&lt;/label&gt;
   &lt;input type="text" class="date_month" /&gt;/
   &lt;input type="text" class="date_day" /&gt;/ 
   &lt;input type="text" class="date_year" /&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is my jQuery:</p>
  
  <pre><code>$(document).ready(function(){
    $(".date-picker .date_year").datepicker({
       showOn: 'button', 
       //buttonImage: "calendar_icon.png", 
       buttonText: 'Cal',
       buttonImageOnly: false, 
       showAnim: 'fadeIn',
       altField: '.date_year', 
       altFormat: 'YYYY',
       altField: '.date_month', 
       altFormat: 'mm',
       onClose: function(dateText,picker) {
                   $.this('.date_month').val( dateText.split(/\//)[0] );
                   $.this('.date_day').val( dateText.split(/\//)[1] );
                   $.this('.date_year').val( dateText.split(/\//)[2] );
                }
      });
  });
  </code></pre>
  
  <p>Remember...I can NOT change the HTML that is rendered to add new classes or id's on the fields. </p>
  
  <p>Any help is greatly appreciated! :)</p>
  
  <p>EDIT: Added an example here so you can see what is happening <a href="http://jsfiddle.net/4KzXs/" rel="nofollow">http://jsfiddle.net/4KzXs/</a></p>