javascript - datetimepicker 的图标未显示

Question

我使用 bootstrap 4，fontawesome v5.7 和这个插件https://tempusdominus.github.io/bootstrap-4/Usage/

日历可以正常工作，但我的问题是图标没有显示

看这个屏幕：

Answer 1

以下代码解决了我的问题。

$.fn.datetimepicker.Constructor.Default = $.extend({},
            $.fn.datetimepicker.Constructor.Default,
            { icons:
                    { time: 'fas fa-clock',
                        date: 'fas fa-calendar',
                        up: 'fas fa-arrow-up',
                        down: 'fas fa-arrow-down',
                        previous: 'fas fa-arrow-circle-left',
                        next: 'fas fa-arrow-circle-right',
                        today: 'far fa-calendar-check-o',
                        clear: 'fas fa-trash',
                        close: 'far fa-times' } });

Answer 2

我使用的是 5.8 版的 font awesome 并且遇到了这个问题。改变

fa-clock-o 

至

fa-clock 

在以下文件中为我修复了它-

tempusdominus-bootstrap-4.js

看起来 FontAwesome 在版本 5 中更改了时钟图标的名称。

Answer 3

有关这方面的信息可以在官方文档中找到：https ://tempusdominus.github.io/bootstrap-4/Options/

全局默认值可以通过 $.fn.datetimepicker.Constructor.Default 获取/设置

例如设置图标以使用 Font Awesome 5

$.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
            icons: {
                time: 'far fa-clock',
                date: 'far fa-calendar',
                up: 'far fa-arrow-up',
                down: 'far fa-arrow-down',
                previous: 'far fa-chevron-left',
                next: 'far fa-chevron-right',
                today: 'far fa-calendar-check-o',
                clear: 'far fa-trash',
                close: 'far fa-times'
            } });

在初始化选择器之前执行此操作。

同样在官方文档中： https ://tempusdominus.github.io/bootstrap-4/Usage/#custom-icons

自定义图标

<div class="container">
    <div class="col-sm-6">
        <div class="form-group">
            <div class="input-group date" id="datetimepicker9" data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker9"/>
                <div class="input-group-append" data-target="#datetimepicker9" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker9').datetimepicker({
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                }
            });
        });
    </script>
</div>