使用jQuery UI datepicker将输入字段数组填充为备用字段

Question

I am using jquery ui datepicker in order to populate start and end dates for multiple events on the same page, the number of events is dynamic and I need to post day, month and year as separate fields, so I have something like this:

<input type="text" name="event[0].startDate" class="date"/>
<input type="hidden" name="event[0].startDate_day" class="startDate_day" />
<input type="hidden" name="event[0].startDate_month" class="startDate_month" />
<input type="hidden" name="event[0].startDate_year" class="startDate_year" />

<input type="text" name="event[0].endDate" class="date"/>
<input type="hidden" name="event[0].endDate_day" class="endDate_day" />
<input type="hidden" name="event[0].endDate_month" class="endDate_month" />
<input type="hidden" name="event[0].endDate_year" class="startDate_year" />

event[1]...
event[2]...

I started working on jQuery functionality and this is what I have so far, which will populate alternate fields for startDate by class, of course it will not do what I need because I need to populate by field name rather then class:

$(".date").datepicker({
    onClose: function(dateText,picker) {
        $('.startDate_month').val( dateText.split(/\//)[0] );
        $('.startDate_day').val( dateText.split(/\//)[1] );
        $('.startDate_year').val( dateText.split(/\//)[2] );
}});

I need help figuring out how can I get the name of the input field within datepicker function so the alternate field assignment done by that field name + _day, month, year so this function can work for all the events on the page, making function above look more like:

$(".date").datepicker({
    onClose: function(dateText,picker) {
        $('input[' + $name + '_month' + ']').val( dateText.split(/\//)[0] );
        $('input[' + $name + '_day' + ']').val( dateText.split(/\//)[1] );
        $('input[' + $name + '_year' + ']').val( dateText.split(/\//)[2] );
}});

Hope that makes sense :) Thanks

Answer 1

Two possibilities.

One is to give each item an ID as well (eg <input id="event_0_endDate_day"… , which is incidentally how Rails handles the naming conversion), and then select it with

$('#event_' + index + '_endDate_day')

The other is to use the property selection bits of Sparkle:

$('input["name"="event[' + index + '].startDate_day"])

The former would be greatly preferred, as the latter will perform much, much more poorly, but perhaps you have no other choice.

edit :

More specifically:

<input type="text" id="event_0_startDate" name="event[0].startDate" class="date"/>
<input type="hidden" id="event_0_startDate_day" name="event[0].startDate_day" class="startDate_day" />
<input type="hidden" id="event_0_startDate_month" name="event[0].startDate_month" class="startDate_month" />
<input type="hidden" id="event_0_startDate_year" name="event[0].startDate_year" class="startDate_year" />

<input type="text" id="event_0_endDate" name="event[0].endDate" class="date"/>
<input type="hidden" id="event_0_endDate_day" name="event[0].endDate_day" class="endDate_day" />
<input type="hidden" id="event_0_endDate_month" name="event[0].endDate_month" class="endDate_month" />
<input type="hidden" id="event_0_endDate_year" name="event[0].endDate_year" class="startDate_year" />

Then, you can do:

$(".date").datepicker({
    onClose: function(dateText,picker) {
        var prefix = $(this).attr('id');
        $('#' + prefix + '_month').val( dateText.split(/\//)[0] );
        $('#' + prefix + '_day').val( dateText.split(/\//)[1] );
        $('#' + prefix + '_year').val( dateText.split(/\//)[2] );
    }
});

Answer 2

To to add my comment to this problem. I used the id="" to assign a counter onto every field so that I could successfully add a jQuery Date picker to each field

Html

<input class="span2" onmouseover="autoCompleteMedicalHistory();"  type="text" id="MedicalHistoryOnset0" name="MedicalHistoryOnset[]" placeholder="Date of Diagnosis"/>

Javascript

var counter=1
var row=' <input class="span2" onmouseover="autoCompleteMedicalHistory();"  type="text" id="MedicalHistoryOnset'+counter+'" name="MedicalHistoryOnset[]" placeholder="Date of Diagnosis"/>"

Jquery Date Picker

jQuery("#MedicalHistoryOnset"+counter).datepicker({dateFormat : 'yy-mm-dd'});