AdminLTE模板中datetimepicker的minDate/maxDate失效问题求助

核心问题排查 #

1. 实例获取方式错误：新版datetimepicker已不再使用data("DateTimePicker")获取实例，改用data('datetimepicker')或datetimepicker('instance')
2. 事件绑定语法过时：dp.change是旧版事件名，新版应使用change.datetimepicker
3. AdminLTE内置版本兼容问题：如果模板自带的datetimepicker版本和官方文档不一致，API调用逻辑会失效

修正后的完整代码 #

替换原有脚本部分：

$(function () {
  // 初始化并缓存日期选择器实例
  const startPicker = $('#da_data_1').datetimepicker({
    format: 'DD/MM/YYYY'
  }).data('datetimepicker');
  
  const endPicker = $('#a_data_2').datetimepicker({
    format: 'DD/MM/YYYY'
  }).data('datetimepicker');

  // 绑定开始日期变更事件，设置结束日期的最小可选值
  $("#da_data_1").on("change.datetimepicker", function (e) {
    endPicker.minDate(e.date);
  });

  // 绑定结束日期变更事件，设置开始日期的最大可选值
  $("#a_data_2").on("change.datetimepicker", function (e) {
    startPicker.maxDate(e.date);
  });
});

额外验证步骤 #

• 检查页面引入的datetimepicker版本：若为v4.x，上述代码直接生效；若为旧版本，需换回dp.change事件和data("DateTimePicker")实例获取方式
• 确认jQuery版本兼容：datetimepicker v4.x需要jQuery 3.x及以上版本，若AdminLTE用了旧版jQuery，可能引发冲突
• 确保容器ID唯一：页面中不能有重复的da_data_1或a_data_2ID

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