填充输入字段使用jQuery UI日期选择器

Question

我使用jQuery UI的日期选择器，以填充多个事件的开始和结束日期在同一页上，事件的数量是动态的交替场的阵列，我需要邮政日，月和年作为单独的领域，所以我有这样的事情：

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

我需要帮助搞清楚怎样才能得到日期选择器功能中输入字段的名称，以便按该字段名称+ _day，一个月做备用字段赋值，一年所以这个功能可以为网页上的所有事件的工作，使功能上面看起来更像：

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

两种可能性。

一个是给每个项目的ID，以及（例如<input id="event_0_endDate_day"…，这是捎带的Rails如何处理的命名转换），然后用

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

另一种方法是使用属性选择位选择它旌宇的：

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

前者将大大首选，因为后者会多演出，多的更差，但也许你没有别的选择。

编辑：

更具体地说：

<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日期选择器为每个字段

的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的日期选取器

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