Datepicker 在克隆的容器中不工作

Question

正在使用日期选择器进行手风琴克隆。我用谷歌搜索但克隆的日期选择器没有得到工作。当用户单击原始日期中的日期时，它按预期工作但是一旦用户单击克隆手风琴中的添加更多按钮，日期选择器就无法工作。我尝试删除 id, hasDatepicker 结果没有达到预期。这可能是重复的问题，但正如我所说，解决方案在我的情况下不起作用。

这是 jquery 代码。

$(document).on('click', '.add_more_pets', function(event) {
    var increment = $('.accordion .panel').length;
    var panelCount = increment+1;
    var clone = $('#accordion1 .panel:last-child').clone(true, true);
    $('#accordion1 .panel').find('.panel-heading').addClass("collapsed");   
    $('#accordion1 .panel').find('.panel-collapse').removeClass("in");
    if($('.accordion .panel').length == 4){
        $(".add_more_pets").hide();
    }
    $(clone).find('.delete_expiration').text('Delete');
    $(clone).find('.panel-heading').attr({id: 'heading'+panelCount, href: '#collapse'+panelCount, 'aria-expanded': 'false', 'aria-controls': 'collapse'+panelCount});
    $(clone).find('.panel-title').text("Pet "+panelCount);      
    $(clone).find('input').val("");
    $(clone).find('.panel-collapse').attr({id: 'collapse'+panelCount, 'aria-labelledby': "heading"+panelCount});

   /* *************cloned datepicker************ */

    $(clone).find("input.pet_dob")
                  .removeAttr('id')
                  .removeClass('hasDatepicker')
                  .removeData('datepicker')
                  .unbind()
                  .datepicker({
                    changeMonth: true,
                    changeYear: true,
                    yearRange: "-60:+0",
                    maxDate : new Date(),
                    inline: true,
                        onSelect: function(selectedDate) {
                            var birthDay = selectedDate;
                            var DOB = new Date(birthDay);
                            var today = new Date();
                            var age = today.getTime() - DOB.getTime();
                            age = Math.floor(age / (1000 * 60 * 60 * 24 * 365.25));
                            $(this).parents('.date_container').next().find('input.pet_age').val(age);
                        }
                });
    $("#count_individual").val(increment);
    $(clone).clone(true, true).addClass('cloned_element').appendTo(".accordion").find("input,select,textarea").attr("name","field_"+increment+"[]");
    increment++;
});

这是我的作品link

提前致谢

Answer 1

您必须为克隆初始化 datePicker。

$(clone).datepicker({...})

为了避免重复，您可以制作一个获取元素并初始化日期选择器的函数，
然后将它用于第一个和克隆。

function setDatepicker(element){ element.datepicker({...}); }

Answer 2

在你的代码中，你有 2 个错误：

你使用clone函数的次数太多，这会让jQuery感到困惑，datetimepicker可能不会很好地工作：

var clone = $('#accordion1 .panel:last-child').clone(true, true); ... $(clone).clone(true, true).addClass('cloned_element')...
使用 datetimepicker('destroy') 而不是尝试删除它 event/class 你自己

您可以在第 35 行 here 查看我的自定义脚本以了解更多详细信息。希望这会有所帮助如有错误请指正

Datepicker 在克隆的容器中不工作

Datepicker not working in cloned container

javascript

jquery

datepicker

bootstrap-datepicker