日期选择器缺少引导导航箭头

Question

我意识到有类似的问题，问题是没有引用正确的字体系列。但是，在我使用的版本中，他们不使用图标作为导航箭头，而是使用 html 字符代码作为左右双箭头。

我的 html 参考 -

 <link href="Content/css/bootstrap.css" rel="stylesheet" />
<link href="Content/css/datepicker.css" rel="stylesheet" />
<link href="Content/css/navbar.css" rel="stylesheet" />
<link href="Content/css/jquery-ui.min.css" rel="stylesheet" />
<link href="Content/css/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="Content/css/jquery-ui.theme.min.css" rel="stylesheet" />

<script type= "text/javascript" src="Scripts/jquery-2.2.0.min.js"></script>
<script type= "text/javascript" src="Scripts/bootstrap.min.js"></script>
<script type= "text/javascript" src="Scripts/bootstrap-datepicker.js"></script>
<script type= "text/javascript" src="Scripts/moment.min.js"></script>
<script type= "text/javascript" src="Scripts/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $(".datepicker").datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            todayBtn: 'linked',
            useCurrent: true,
            ignoreReadonly: true
        })
    });
</script>

这是 bootstrap-datepicker.js 文件中的相关编码 -

     headTemplate: '<thead>'+
                      '<tr>'+
                        '<th colspan="7" class="datepicker-title"></th>'+
                      '</tr>'+
                        '<tr>'+
                            '<th class="prev">&laquo;</th>'+
                            '<th colspan="5" class="datepicker-switch"></th>'+
                            '<th class="next">&raquo;</th>'+
                        '</tr>'+
                    '</thead>',
    contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>',
    footTemplate: '<tfoot>'+
                        '<tr>'+
                            '<th colspan="7" class="today"></th>'+
                        '</tr>'+
                        '<tr>'+
                            '<th colspan="7" class="clear"></th>'+
                        '</tr>'+
                    '</tfoot>'
};

我得到的只是与一般标题背景相同的灰色，然后是正常的蓝色“悬停”，就像我在日历上的任何特定日期一样。

我在其他 .css 文件中寻找冲突的“.prev”定义，但没有看到任何特定于表、日期选择器或标题的定义。我也尝试过使用字形替换编码，结果相同。

我的小提琴-

JFiddle 编码示例

原文由 PoloHoleSet 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据您提供的 Fiddle，问题似乎出在 jQuery UI 上。它覆盖了 .datepicker 类的元素，并将 .prev 和 .next 中的文本替换为相对路径无效的基于图像构建的图标.

您的解决方案是添加适当的图像（根据您对上述评论的回应选择），或者确保 jQuery UI 没有连接到您的 Datepicker。

原文由 Robert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我已经解决了：

 <script>
$(document).ready( function(){

  $('#datepicker').datepicker({
    minDate: "01/01/1965",
    maxDate: "12/31/2005",
    startDate: "01/01/1965",
    endDate:    "12/31/2005",
    changeYear: true,
    changeMonth: true,
    autoclose: true
  });

  $('.prev i').removeClass();
  $('.prev i').addClass("fa fa-chevron-left");

  $('.next i').removeClass();
  $('.next i').addClass("fa fa-chevron-right");

});

删除标签的类，然后分配一个字体很棒的箭头类

原文由 Fernando León 发布，翻译遵循 CC BY-SA 3.0 许可协议