Question

我有使用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] );
              }
    });
});

请记住......我无法更改为在域上添加新类或ID而呈现的HTML。

非常感谢任何帮助！：）

编辑：在此处添加了一个示例，以便您了解正在发生的事情http://jsfiddle.net/4KzXs/

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

FIDDLE

jQuery UI DatePicker拆分为多个动态字段

1 个答案: