JQuery Datetimepicker仅在Datatables首行生效问题求助

在带有编辑模态框的Datatables中，点击行内按钮弹出模态框编辑数据时，仅第一行的JQuery Datetimepicker能正常工作，其余行的日期选择器完全无效，且浏览器控制台无报错信息。

核心原因是ID重复：循环生成模态框时，所有行的开始日期输入框ID都是datetimepicker11，结束日期都是datetimepicker12。而jQuery通过ID选择器#xxx查找元素时，只会匹配DOM中第一个出现的元素，后续重复ID的元素不会被绑定事件。

1. 修改PHP代码，保证元素ID唯一并添加统一类名 #

给每个输入框的ID加上行的唯一标识（比如$row['id']），同时添加通用class用于批量绑定：

<td> 
  <button type="button" class="btn btn-warning" data-target="#updateInt<?php echo $row['id'] ?>" data-toggle="modal">
    <i class="fa-solid fa-pencil"></i>
  </button>

  <div class="modal fade" id="updateInt<?php echo $row['id'] ?>" tabindex="-1" role="dialog" aria-labelledby="updateInt" aria-hidden="true">
    <div class="modal-body">
      <div class="form-group">
        <label for="ester">Start Date</label>
        <input type="text" class="form-control datetimepicker-start" name="datetimepicker1" id="datetimepicker11-<?php echo $row['id'] ?>" value="<?php echo $row['ybegin']?>" required/>
      </div>
      <div class="form-group">
        <label for="ester">End Date</label>
        <input type="text" class="form-control datetimepicker-end" name="datetimepicker2" id="datetimepicker12-<?php echo $row['id'] ?>" value="<?php echo $row['yend']?>" required/>
      </div>
    </div>
  </div>
</td>

2. 修改JS代码，用类选择器绑定并关联当前模态框的元素 #

不再依赖ID绑定，改用class选择器，并且在结束日期的onShow回调中，通过当前元素的父级模态框找到对应的开始日期输入框，避免全局查找：

jQuery(function(){
    // 绑定所有开始日期选择器
    jQuery('.datetimepicker-start').datetimepicker({
        format:'Y/m/d',
        timepicker:false
    });
    
    // 绑定所有结束日期选择器
    jQuery('.datetimepicker-end').datetimepicker({
        format:'Y/m/d',
        onShow:function( ct ){
            // 找到当前输入框所在的模态框，再在其中找对应的开始日期输入框
            const startInput = jQuery(this).closest('.modal').find('.datetimepicker-start');
            this.setOptions({
                minDate: startInput.val() ? startInput.val() : false
            })
        },
        timepicker:false
    });
});

3. 额外适配（如果Datatables是异步加载数据） #

如果你的Datatables是通过AJAX动态加载行数据，需要在表格重绘后重新初始化日期选择器，可借助drawCallback回调实现：

$(document).ready(function() {
    var table = $('#intake').DataTable( {
        dom: 'Qlfrtip',
        order: [],
        columnDefs: [{
                searchBuilder: {
                    defaultCondition: "=",
                },
                targets: [1]
            }],
        drawCallback: function() {
            // 每次表格重绘后重新初始化日期选择器
            jQuery('.datetimepicker-start').datetimepicker({
                format:'Y/m/d',
                timepicker:false
            });
            
            jQuery('.datetimepicker-end').datetimepicker({
                format:'Y/m/d',
                onShow:function( ct ){
                    const startInput = jQuery(this).closest('.modal').find('.datetimepicker-start');
                    this.setOptions({
                        minDate: startInput.val() ? startInput.val() : false
                    })
                },
                timepicker:false
            });
        }
    } );
} );

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