Tempus Dominus datetimepicker起止日期联动失效问题咨询

核心问题原因 #

1. jQuery重复加载冲突
   你在headFragment中已经通过CDN引入了jQuery，后续javaScriptFragment中又再次引入了本地版本jQuery，二次加载会覆盖已经挂载了Tempus Dominus插件的jQuery实例，导致datetimepicker方法失效，联动逻辑无法运行。
2. 非法双head标签结构
   主页面中写完<head th:replace="fragment/head :: headFragment"/>后，又额外写了一个<head>标签包裹自定义样式，不符合HTML规范，浏览器解析DOM时可能出现异常，影响后续脚本执行。
3. 可选隐患：日期格式未明确配置
   未指定统一的日期格式时，可能出现时区或格式不匹配，导致minDate/maxDate赋值异常。

修复步骤 #

1. 删除重复引入的依赖
   删除javaScriptFragment里重复的jQuery、popper、bootstrap引入代码，这些依赖已经在headFragment中通过CDN引入过，重复引入只会导致冲突。
2. 修正HTML head结构
   删除多余的<head>标签，把自定义样式直接放在head片段引入之后，正确结构如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragment/head :: headFragment"/>
<style>
    html, body, .content-page {
        height: 100%;
    }
    #wrapper, .content-page {
        min-height: 100%;
    }
    .content {
        overflow: auto;
        padding: 20px 5px 124px 5px !important;
    }
    footer {
        z-index: 1;
        position: static;
    }
</style>
</head>
<body class="fixed-left">
<!-- 原有body内容保持不变 -->

3. 优化日期选择器初始化逻辑
   明确配置日期格式，增加空值判断避免赋值异常，修改初始化代码如下：

$(function () {
    // 日期格式可根据实际需求调整
    $("#divDateStart").datetimepicker({
        format: 'YYYY-MM-DD'
    });
    $("#divDateEnd").datetimepicker({
        format: 'YYYY-MM-DD',
        useCurrent: false
    });
    $("#divDateStart").on("change.datetimepicker", function (e) {
        if(e.date) {
            $("#divDateEnd").datetimepicker('minDate', e.date);
        }
    });
    $("#divDateEnd").on("change.datetimepicker", function (e) {
        if(e.date) {
            $("#divDateStart").datetimepicker('maxDate', e.date);
        }
    });
});

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