Bootstrap 4 Datetimepicker格式设置无效问题求助

问题根源及修复方案 #

1. 清理重复引入的依赖 #

你的代码里重复加载了moment.js（2.14.1和2.22.2两个版本）以及Bootstrap CSS，依赖冲突会直接干扰组件的正常逻辑：

• 删除旧版本的moment.js引入代码
• 保留一套Bootstrap CSS即可（推荐保留4.4.1版本）

2. 匹配兼容的jQuery版本 #

当前使用的jQuery 1.12.4版本较老，虽然理论上兼容Tempus Dominus 5.0.1，但建议升级到jQuery 3.x版本（如3.6.0），规避版本不匹配引发的隐性问题。

3. 规范配置参数写法 #

对于Tempus Dominus Bootstrap 4 v5.x版本，格式配置可直接通过format字段设置，确保参数正确：

$(function() {
    $('#datetimepicker1').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss',
        showTimepicker: true // 可选，确保时间选择模块默认启用
    });
});

修复后的完整代码示例 #

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static',filename='css/custom.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.js" integrity="sha256-2JRzNxMJiS0aHOJjG+liqsEOuBb6++9cY4dSOyiijX4=" crossorigin="anonymous"></script>

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function() {
        $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss'
        });
    });
</script>

额外排查要点 #

• 打开浏览器控制台，检查是否有依赖加载失败、语法报错等信息，这类问题也会导致格式设置失效
• 如果需要本地化时间显示，确保引入了对应的moment.js语言包

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