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的备用字段，当然它不会做我需要的，因为我需要填充字段名而不是类：< / p>

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

两种可能性。

一个是给每个项目一个ID（例如<input id="event_0_endDate_day"…，顺便说一下Rails如何处理命名转换），然后用

选择它

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

另一种是使用Sparkle的属性选择位：

$('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 Date选择器

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

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

2 个答案: