Заполнение массива полей ввода в качестве альтернативных полей с помощью jQuery UI datepicker

Question

Я использую jquery ui datepicker, чтобы заполнить даты начала и окончания для нескольких событий на одной странице, число событий является динамическим, и мне нужно опубликовать день, месяц и год как отдельные поля, поэтому у меня есть что-то вроде это:

<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]...

Я начал работать над функциональностью jQuery, и это то, что я имею до сих пор, который будет заполнять альтернативные поля для startDate по классам, конечно, он не будет делать то, что мне нужно, потому что мне нужно заполнять по имени поля, а не по классу:

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

Мне нужна помощь, чтобы выяснить, как я могу получить имя поля ввода в функции datepicker, чтобы альтернативное назначение поля выполнялось по имени этого поля + _day, month, year, чтобы эта функция могла работать для всех событий на странице, функция выше выглядит как:

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

Надеюсь, что это имеет смысл :) Спасибо

Answer 1

Две возможности.

Один из них - присвоить каждому элементу также идентификатор (например, <input id="event_0_endDate_day"…, что, кстати, Rails обрабатывает преобразование имен), а затем выберите его с помощью

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

Другой - использовать биты выбора свойств Sparkle:

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

Первый вариант будет очень предпочтительным, так как последний будет работать намного, намного хуже, но, возможно, у вас нет другого выбора.

edit :

Более конкретно:

<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" />

Затем вы можете сделать:

$(".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

Чтобы добавить мой комментарий к этой проблеме. Я использовал id = "", чтобы назначить счетчик для каждого поля, чтобы я мог успешно добавить JQuery Date Picker для каждого поля

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