动态 jQuery UI 日期选择器元素答案

【问题标题】：Dynamic jQuery UI datepicker elements动态 jQuery UI 日期选择器元素
【发布时间】：2012-09-03 12:29:05
【问题描述】：

我正在使用 jQuery UI datepicker 函数在我的 html 表单中创建多个日期字段。

我正在使用以下代码来让任何带有“datepicker”类的输入字段工作：

$('.datepicker').each(function() {
    var id = $(this).attr('id').split('_')[0];

    if ($('#'+id+'_value').val()) { 
        var initialdate = new Date($('#'+id+'_value').val());
    }
    else {
        var initialdate = new Date();
    }

    $(this).val($.datepicker.formatDate('DD, d MM, yy', initialdate));
    $('#'+$(this).attr('id').split('_')[0]+'_value').val($.datepicker.formatDate('yy-mm-dd', initialdate));
    $(this).datepicker({
                        'dateFormat': 'DD, d MM, yy',
                        'altField': '#'+id+'_value',
                        'altFormat': 'yy-mm-dd' 
    });
});

但是，我还使用其他一些 javascript 来克隆包含多个表单元素的跨度。创建新元素时，日期选择器功能不起作用。

我可以做些什么来让新的和现有的一样工作？

任何建议表示赞赏。

谢谢。

【问题讨论】：

标签： javascript jquery-ui datepicker

【解决方案1】：

由于您可能在创建文档时调用了该迭代，因此稍后添加到 DOM 的项目不会被实例化为新的日期选择器，因此您必须在您希望启用日期选择器的每个新添加的元素上显式调用 .datepicker()开。

基本上，将代码从上面的迭代器移到它自己的函数中，然后这样做：

$('.datepicker').each(myDatePickerFunction($(this));

并对稍后添加的元素调用相同的函数。

【讨论】：