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

【问题标题】：Bootstrap navigation arrows missing for datepicker日期选择器缺少引导导航箭头
【发布时间】：2016-11-29 00:21:09
【问题描述】：

我意识到存在与此类似的问题，问题是未引用正确的字体系列。但是，在我使用的版本中，他们不使用导航箭头的图标，他们使用 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 Coding samples

【问题讨论】：

你的精灵文件，它们是否在引导程序正在寻找的目录中？
在这种情况下，可能需要一个小提琴，以便我们可以检查您正在使用的各种 CSS 和 JS 中的任何冲突。
你应该包含glyphicons-halflings-regular文件
@demo - 我确实在字体目录中有该文件，并且它确实被 bootstrap.css 引用。但是，既然它没有使用任何字体系列的图标，为什么需要它呢？当我在页面正文中使用 html 字符编码 («) 时，它显示得很好，仅供参考。
@Robert C - 我将检查如何设置它，并在完成后进行编辑。谢谢！

标签： javascript html css twitter-bootstrap datepicker

【解决方案1】：

根据您提供的 Fiddle，看起来 jQuery UI 是问题所在。它会覆盖您的 .datepicker 类的元素，并将 .prev 和 .next 中的文本替换为具有在您的构建中无效的相对路径的基于图像的图标。

您的解决方案是添加适当的图像（根据您对上面选择的 cmets 的响应），或者确保 jQuery UI 没有挂接到您的 Datepicker。

【讨论】：

对于像我这样没有 javascript 经验的人来说，添加图像绝对是一条不那么充满潜在灾难的道路。非常感谢您的帮助！
在 font awesome css 为我修复之前加载 jquery-ui css

【解决方案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");

});

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

【讨论】：

【解决方案3】：

这可能是因为找不到这些箭头的图标。

转到 bootstrap-datetimepicker.min.js 并搜索 icons

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" },

确保这两个类具有它们的值出现在上面列表中的样式

    .bootstrap-datetimepicker-widget table th.prev::after {
        content: "previous"; 
     }

    .bootstrap-datetimepicker-widget table th.next::after {
        content: "next";
     } ```

如果第 2 步不起作用，请尝试将 glyhpicon 更改为其他图标

【讨论】：