0

我有重复日期字段的表单，使用 3 个单独的字段分别表示月、日和年。我拥有它，因此它将日期拆分为 3 个字段，但一个大问题是系统在表单上呈现多个日期选择器，并且我无法更改月日和年字段的 html 或表单字段类。我怎样才能做到这一点，以便我们可以使用一个周围的 div 类，它只更新每个日期选择器 div 组中的日期字段？

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

请记住...我不能更改呈现的 HTML 以在字段上添加新的类或 id。

任何帮助是极大的赞赏！:)

编辑：在这里添加了一个例子，这样你就可以看到发生了什么http://jsfiddle.net/4KzXs/

4

1 回答 1

1 
$(".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]);
    }
});

小提琴

于 2013-03-07T16:35:46.010 回答