如何在Bootstrap 4.6 + Laravel 8应用中正常显示datetimepicker组件

现有组件适配Bootstrap4.6的修复方法 #

你遇到的图标缺失问题根源是当前使用的bootstrap-datetimepicker 4.17.47是为Bootstrap3开发的，默认依赖Bootstrap3内置的Glyphicon图标库，而Bootstrap4及以上版本已经移除了Glyphicon，所以才会出现图标不显示的问题，不需要引入Bootstrap3的CSS，直接修改组件初始化配置即可解决：

方案：初始化时指定Font Awesome图标 #

从你的代码可以看到已经引入了Font Awesome图标库，只需要在datetimepicker初始化时加入图标映射配置即可：

$(document).ready(function () {
    $('#dob').datetimepicker({
        // 替换默认Glyphicon为Font Awesome图标
        icons: {
            time: 'far fa-clock',
            date: 'far fa-calendar',
            up: 'fas fa-chevron-up',
            down: 'fas fa-chevron-down',
            previous: 'fas fa-chevron-left',
            next: 'fas fa-chevron-right',
            today: 'fas fa-calendar-check',
            clear: 'fas fa-trash',
            close: 'fas fa-times'
        }
    });
});

另外你的HTML代码里还存在Bootstrap4不兼容的类名，可以同步修改避免样式异常：Bootstrap4已经移除了input-group-addon，替换为input-group-append即可：

<div class="form-group">
    <label for="user_id">
        User <span class="text-danger">*</span>
    </label>
    <div class="input-group" id="dob">
        <input type="text" class="form-control" placeholder="Date Of Birth">
        <div class="input-group-append">
            <span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
        </div>
    </div>
</div>

适配Bootstrap4.6 + jQuery 3.4的datetimepicker推荐 #

如果需要更原生的Bootstrap4适配，可以替换为以下更适配当前技术栈的组件：

• Tempus Dominus：是原bootstrap-datetimepicker作者针对Bootstrap4/5重写的官方迭代版本，API和旧版高度兼容，迁移成本极低，原生支持Bootstrap4样式和自定义图标配置，不需要额外做兼容性调整。
• flatpickr：轻量级无依赖的日期时间选择器，体积仅几十KB，不依赖Bootstrap JS也可以正常运行，支持自定义主题，可完美适配Bootstrap4样式，是目前很多Laravel项目的首选日期组件。
• eonasdan-bootstrap-datetimepicker的BS4分支：社区维护的适配Bootstrap4的分支版本，和你当前使用的组件API完全一致，只需要替换引入的CSS和JS文件即可。

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