jQuery UI DatePicker拆分爲多個動態字段

我有重複日期字段使用3個單獨的字段爲月，日和年的表單。我喜歡它，所以它將日期分成3個字段，但最大的問題是系統在窗體上呈現多個日期選擇器，並且我無法更改月份日期和年份字段的html或表單字段類。我怎樣才能使它，所以我們可以使用一個周圍的div類，它只更新每個日期選擇器div組中的日期字段？jQuery UI DatePicker拆分爲多個動態字段

示例HTML：

<div class="date-picker"> 
<label for="preferredDate">Date</label> 
<input type="text" class="date_month" />/ 
<input type="text" class="date_day" />/ 
<input type="text" class="date_year" /> 
</div> 
<div class="date-picker"> 
<label for="preferredDate">Date</label> 
<input type="text" class="date_month" />/ 
<input type="text" class="date_day" />/ 
<input type="text" class="date_year" /> 
</div> 
<div class="date-picker"> 
<label for="preferredDate">Date</label> 
<input type="text" class="date_month" />/ 
<input type="text" class="date_day" />/ 
<input type="text" class="date_year" /> 
</div>

這裏是我的jQuery：

$(document).ready(function(){ 
    $(".date-picker .date_year").datepicker({ 
    showOn: 'button', 
    //buttonImage: "calendar_icon.png", 
    buttonText: 'Cal', 
    buttonImageOnly: false, 
    showAnim: 'fadeIn', 
    altField: '.date_year', 
    altFormat: 'YYYY', 
    altField: '.date_month', 
    altFormat: 'mm', 
    onClose: function(dateText,picker) { 
       $.this('.date_month').val(dateText.split(/\//)[0]); 
       $.this('.date_day').val(dateText.split(/\//)[1]); 
       $.this('.date_year').val(dateText.split(/\//)[2]); 
       } 
    }); 
});

記住...我不能改變被渲染到上的字段添加新類或ID的HTML中。

任何幫助，非常感謝！ :)

編輯：添加了一個例子，你在這兒可以看到發生了什麼http://jsfiddle.net/4KzXs/

來源

2013-03-06 Aaron

我想你'的OnClose：'方法你想要做什麼。另外，你不能重複'altField：'和'altFormat：'選項。 – Barmar 2013-03-07 00:26:22

我已經添加了一個這裏發生了什麼的例子http://jsfiddle.net/4KzXs/ – Aaron 2013-03-07 14:23:49

好吧，我有一個新的更新示例。 http://jsfiddle.net/n9sRy/1/我現在至少把值放在所有領域。呃...需要它只將值放在每個div class = date-picker的字段中。 – Aaron 2013-03-07 15:48:00

$(".date_year").datepicker({ 
    showOn: 'button', 
    //buttonImage: "calendar_icon.png", 
    buttonText: 'Cal', 
    buttonImageOnly: false, 
    showAnim: 'fadeIn', 
    dateFormat: 'mm/dd/yy', 
    onClose: function (dateText, picker) { 
     dateArr = dateText.split('/'); 
     $(this).siblings('.date_month').val(dateArr[0]); 
     $(this).siblings('.date_day').val(dateArr[1]); 
     $(this).val(dateArr[2]); 
    } 
});

FIDDLE

來源

2013-03-07 16:35:46 Barmar

jQuery UI DatePicker拆分爲多個動態字段

回答

相關問題