Eonasdan/bootstrap-datetimepicker 箭头图标未在 Safari 上显示，在 Chrome 上显示蓝色方块答案

【问题标题】：Eonasdan/bootstrap-datetimepicker arrow icon not showing on Safari and showing blue squares on ChromeEonasdan/bootstrap-datetimepicker 箭头图标未在 Safari 上显示，在 Chrome 上显示蓝色方块
【发布时间】：2017-04-08 22:01:24
【问题描述】：

我的日期时间选择器工作正常，但导航时间和日期的箭头显示不正确。

Safari

Chrome

我尝试使用以下代码设置 Javascript 中的默认选项：

 icons: {
        time: 'glyphicon glyphicon-time',
        date: 'glyphicon glyphicon-calendar',
        up: 'glyphicon glyphicon-chevron-up',
        down: 'glyphicon glyphicon-chevron-down',
        previous: 'glyphicon glyphicon-chevron-left',
        next: 'glyphicon glyphicon-chevron-right',
        today: 'glyphicon glyphicon-screenshot',
        clear: 'glyphicon glyphicon-trash',
        close: 'glyphicon glyphicon-remove'
    }

但似乎没有任何效果。

【问题讨论】：

您在控制台中看到任何错误吗？确保所有 css 和字体都已正确加载。
控制台没有错误。图标来自引导程序并通过以下链接导入： ?

标签： javascript css twitter-bootstrap

【解决方案1】：

如果您使用的是 Bootstrap V4，则已删除 Glyphicons。我使用 Fontawesome 修复了丢失的箭头。将这些添加到图标选项中。

    $('.dateP').datetimepicker(
    {

        icons: 
        {
            next: 'fa fa-angle-right',
            previous: 'fa fa-angle-left'
        },
        format: 'DD/MM/YYYY',

        widgetPositioning: {
            horizontal: 'right',
            vertical: 'auto'
        }
    });

【讨论】：

【解决方案2】：

也许你的 boostrap 中没有 glyphicon 或者它有什么问题所以没有发生任何事情，第一个解决方法是：实现 fontAwesome 然后设置：

$('.yourSelector').datetimepicker({         
     fontAwesome:'font-awesome'     
});

第二种解决方法：打开 boostrap-datetimepicker.js 然后替换

 headTemplateV3:   '<thead>' +
                      '<tr>' +
                      '<th class="prev"><i class="icon icon-arrow-left"></i> </th>' +
                      '<th colspan="5" class="switch"></th>' +
                      '<th class="next"><i class="icon icon-arrow-right"></i> </th>' +
                      '</tr>' +
    '</thead>',

宽度

headTemplateV3:   '<thead>'+
                    '<tr>'+
                        '<th class="prev"><i class="glyphicon glyphicon-arrow-left"/></th>'+
                        '<th colspan="5" class="switch"></th>'+
                        '<th class="next"><i class="glyphicon glyphicon-arrow-right"/></th>'+
                    '</tr>'+
                '</thead>',

祝你好运！

【讨论】：

【解决方案3】：

   $('.dateP').datetimepicker(
    {

        icons: 
        {
            up: 'fa fa-angle-right',
            down: 'fa fa-angle-left'
        }
  });

通过这种方式，您可以使用自定义图标，因为字形图标已被弃用！

【讨论】：