Bootstrap4 Tempus Dominus DateTimePicker无报错但不显示问题求助

算力阿峰

2026-10-6

问题排查及解决方法

data-target属性不匹配
当前input的id为shopping_order_time，但设置的data-target="#shoppingtakeout_time"指向不存在的容器，组件无法找到对应的弹出层挂载节点，自然无法正常显示。
解决方法：将input的data-target属性值修改为自身id对应的选择器#shopping_order_time，或在外层包裹和data-target匹配的容器，示例结构如下：
```
<div class="input-group date" id="shoppingtakeout_time" data-target-input="nearest">
  <input type="text" id="shopping_order_time" name="_shopping_order[time]" required="required" class="datetimepicker-input form-control" data-target="#shoppingtakeout_time" data-toggle="datetimepicker">
</div>
```
依赖加载错误
存在三类依赖问题：
1. 缺失jQuery依赖，Bootstrap 4和tempusdominus日期组件都依赖jQuery运行，你提供的引入代码中没有加载jQuery
2. 重复引入moment库，moment.min.js和moment-with-locales.min.js功能重叠，重复引入会引发版本冲突，仅保留带本地化的moment-with-locales.min.js即可
3. 缺失样式文件，没有引入Bootstrap 4基础CSS、tempusdominus组件CSS，会导致弹出层渲染后不可见
  正确的依赖引入顺序如下：
4. 引入Bootstrap 4基础CSS文件
5. 引入tempusdominus-bootstrap-4组件对应的CSS文件
6. 引入jQuery库
7. 引入bootstrap.js脚本
8. 引入moment-with-locales.min.js
9. 最后引入tempusdominus-bootstrap-4.min.js组件脚本
初始化方式冲突
你同时使用了data-toggle="datetimepicker"属性自动初始化、JS手动调用datetimepicker()初始化两种方式，容易引发初始化冲突。
解决方法：二选一即可，要么删除input上的data-toggle、data-target属性，完全通过JS绑定；要么移除手动初始化的JS代码，仅用属性初始化。
纯JS初始化示例代码如下：
```
$(function () {
    $('#shopping_order_time').datetimepicker({
        locale: 'ja',
        format: 'YYYY-MM-DD HH:mm:ss',
        useCurrent: true,
        buttons: {
            showToday: true,
            showClose: true
        }
    });
});
```