Tempus Dominus配置失效：已设隐藏时间组件仍显示

你在Django项目中通过CDN引入Tempus Dominus日期选择器，想要仅实现日期输入功能，配置了display.viewMode为calendar并关闭了时间相关组件，但时间部分依然显示。以下是问题原因和修复方案：

问题根源 #

1. 重复ID冲突：HTML中外层容器div和内部input共用了id="id_worklog_date"，导致JS初始化时选中错误元素，配置无法生效。
2. 冗余重复元素：资源引入代码中额外添加了一个同ID的input，进一步干扰初始化逻辑。
3. 缺少日期格式约束：仅关闭时间组件还不够，未设置纯日期格式会让选择器默认保留时间处理逻辑。

修复后的代码 #

修正后的HTML（唯一ID+正确关联） #

<div class="container">
    <div class="input-group" id="worklog_date_container" data-td-target-input="nearest"
         data-td-target-toggle="nearest">

        <input type="text" name="worklog_date" class="form-control" placeholder="Введите дату" required="" id="id_worklog_date">

        <span class="input-group-text" data-td-target="#worklog_date_container" data-td-toggle="datetimepicker">
            <i class="fas fa-calendar"></i>
        </span>

    </div>
</div>

修正后的JS（正确容器+日期格式约束） #

new tempusDominus.TempusDominus(document.getElementById("worklog_date_container"), {
    display: {
        viewMode: 'calendar',
        components: {
            calendar: true,
            date: true,
            month: true,
            year: true,
            decades: true,
            clock: false,
            hours: false,
            minutes: false,
            seconds: false
        }
    },
    // 强制仅处理日期，隐藏时间相关逻辑
    format: 'yyyy-MM-dd'
});

修正后的资源引入（移除冗余input） #

<!-- Popperjs -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha256-BRqBN7dYgABqtY9Hd4ynE+1slnEw+roEPFzQ7TRRfcg=" crossorigin="anonymous"></script>
<!-- Tempus Dominus JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.4.4/dist/js/tempus-dominus.min.js" crossorigin="anonymous"></script>

<!-- Tempus Dominus Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.4.4/dist/css/tempus-dominus.min.css" crossorigin="anonymous">

验证要点 #

• 确保页面中所有元素ID唯一，避免冲突
• 初始化时必须选择包含input的容器div，而非input本身
• 配置format为纯日期格式（如yyyy-MM-dd），彻底禁用时间处理模块

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