动态增删行表单中Date Picker无法显示的问题排查

我来帮你排查这个日期选择器弹窗不显示的问题，主要有两个核心问题需要调整：

1. 重复ID导致选择器失效 #

每次点击添加按钮都会生成一个id="datepicker"的输入框，但HTML规范要求ID必须唯一，这会让后续的初始化代码无法正确定位到新添加的元素。

修改方式：
把添加行时的输入框ID改成类名，这样既符合规范，又能通过类选择器精准定位：

// 原代码
html += '<td><input id = "datepicker" type="text" name="item_name[]" class="form-control item_name" /></td>';

// 修改后
html += '<td><input type="text" name="item_name[]" class="form-control item_name datepicker" /></td>';

2. 初始化时机错误 #

页面加载时执行的$("#datepicker").datetimepicker()只能初始化当时已经存在的DOM元素，而动态添加的输入框是后续生成的，并没有被初始化。

修改方式：
删除页面底部单独的初始化脚本，改为在每次添加新行之后，立即初始化该行的日期选择器：
在$('#item_table').append(html);这行代码后面，添加初始化逻辑：

// 初始化刚添加的行里的日期选择器
$('#item_table').find('tr:last').find('.datepicker').datetimepicker();

可选优化：清理重复脚本引入 #

你同时引入了jquery.datetimepicker.full.js和jquery.datetimepicker.js，这两个文件功能重复，可能引发冲突，建议只保留jquery.datetimepicker.full.js即可，删掉另一个重复的引入。

修改后的完整脚本示例 #

$(document).ready(function(){
    $(document).on('click', '.add', function(){
        var html = '';
        html += '<tr>';
        html += '<td><input type="text" name="item_name[]" class="form-control item_name datepicker" /></td>';
        html += '<td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td>';
        html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
        $('#item_table').append(html);
        // 初始化新添加的日期选择器
        $('#item_table').find('tr:last').find('.datepicker').datetimepicker();
    });

    $(document).on('click', '.remove', function(){
        $(this).closest('tr').remove();
    });

    $('#insert_form').on('submit', function(event){
        event.preventDefault();
        var error = '';
        $('.item_name').each(function(){
            var count = 1;
            if($(this).val() == ''){
                error += "<p>Enter Item Name at "+count+" Row</p>";
                return false;
            }
            count = count + 1;
        });
        $('.item_quantity').each(function(){
            var count = 1;
            if($(this).val() == ''){
                error += "<p>Enter Item Quantity at "+count+" Row</p>";
                return false;
            }
            count = count + 1;
        });
        var form_data = $(this).serialize();
        if(error == ''){
            $.ajax({
                url:"insert.php",
                method:"POST",
                data:form_data,
                success:function(data){
                    if(data == 'ok'){
                        $('#item_table').find("tr:gt(0)").remove();
                        $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
                    }
                }
            });
        } else{
            $('#error').html('<div class="alert alert-danger">'+error+'</div>');
        }
    });
});

这样修改后，每次添加新行时，对应的日期选择框都会被正确初始化，点击就能弹出日历弹窗了。

内容的提问来源于stack exchange，提问作者Princess Niki