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

我使用jQuery UI的日期选择器，以填充多个事件的开始和结束日期在同一页上，事件的数量是动态的交替场的阵列，我需要邮政日，月和年作为单独的领域，所以我有这样的事情：填充输入字段使用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]); 
}});

希望是有道理的:)谢谢

来源

2010-04-08 Micor

两种可能性。

一个是给每个项目的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]); 
    } 
});

来源

2010-04-08 04:40:10

谢谢您的建议。我可以按照您的建议分配输入ID，但我仍然有两个问题。 1.我如何获得该指数和2这只会对的startDate工作，然后我必须复制的结束日期的功能。有什么建议么？ – Micor 2010-04-08 06:13:47

修改为包含代码。希望有所帮助。 – 2010-04-08 06:56:34

工程太棒了！谢谢。 – Micor 2010-04-08 19:05:44

要到我的评论添加到这个问题。我使用的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'});

来源

2013-11-29 11:49:42 bobthenob

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

回答

相关问题