jQuery UI DatePicker split to multiple dynamic fields

Question

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?

Example HTML:

<div class="date-picker">
 <label for="preferredDate">Date</label>
 <input type="text" class="date_month" />/
 <input type="text" class="date_day" />/ 
 <input type="text" class="date_year" /> 
</div>
<div class="date-picker">
 <label for="preferredDate">Date</label>
 <input type="text" class="date_month" />/
 <input type="text" class="date_day" />/ 
 <input type="text" class="date_year" /> 
</div>
<div class="date-picker">
 <label for="preferredDate">Date</label>
 <input type="text" class="date_month" />/
 <input type="text" class="date_day" />/ 
 <input type="text" class="date_year" /> 
</div>

And here is my jQuery:

$(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] );
              }
    });
});

Remember...I can NOT change the HTML that is rendered to add new classes or id's on the fields.

Any help is greatly appreciated! :)

EDIT: Added an example here so you can see what is happening http://jsfiddle.net/4KzXs/

I think your onClose: method does what you want. Also, you can't repeat options altField: and altFormat:. — Barmar
– Barmar, Commented Mar 7, 2013 at 0:26
I have added a example of what is happening here jsfiddle.net/4KzXs — Aaron
– Aaron, Commented Mar 7, 2013 at 14:23
Ok i have a new update example. jsfiddle.net/n9sRy/1 i have it now atleast putting the values in all fields. ugh...need it to only put the values in the fields in each div class=date-picker. — Aaron
– Aaron, Commented Mar 7, 2013 at 15:48

Barmar · Accepted Answer · 2013-03-07 16:35:46Z

1

$(".date_year").datepicker({
    showOn: 'button',
    //buttonImage: "calendar_icon.png", 
    buttonText: 'Cal',
    buttonImageOnly: false,
    showAnim: 'fadeIn',
    dateFormat: 'mm/dd/yy',
    onClose: function (dateText, picker) {
        dateArr = dateText.split('/');
        $(this).siblings('.date_month').val(dateArr[0]);
        $(this).siblings('.date_day').val(dateArr[1]);
        $(this).val(dateArr[2]);
    }
});

FIDDLE

answered Mar 7, 2013 at 16:35

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI DatePicker split to multiple dynamic fields

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related