填充輸入字段使用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日期選擇器

回答

相關問題