日期选择器缺少引导导航箭头 [英] Bootstrap navigation arrows missing for datepicker

问题描述

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

I realize there were similar questions to this where the problem was the correct font family not being referenced. However, in the version I am using, they don't use an icon for the navigation arrows, they use the html character code for the double-left and double-right arrows.

我的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文件中的相关代码-

Here is the relevant coding from the bootstrap-datepicker.js file -

    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>'
};

我所得到的是与一般标题背景相同的灰色，然后是普通的蓝色悬停-over，就像我在日历上的任何一天一样。

All I am getting is the same grey as the general header background, and then the normal blue "hover-over" as I would for any particular day on the calendar.

我在其他.css文件中寻找了冲突的 .prev定义，但没有发现任何特定于表，日期选择器或标题的信息。我也尝试过使用glyphicons替换编码，结果相同。

I looked for conflicting ".prev" definitions in the other .css files, but didn't see any specific to tables, datepicker or headers. I have also tried substituting coding using the glyphicons, same result.

我的jfiddle-

JFiddle编码示例

推荐答案

基于您提供的Fiddle，看起来jQuery UI就是问题。它覆盖了 .datepicker 类的元素，并替换了 .prev 和中的文本。下一步带有基于图像的图标，这些图标的相对路径在您的版本中无效。

Based on your provided Fiddle, it looks like jQuery UI is the problem. It is overriding elements of your .datepicker class and replacing the text in .prev and .next with image-based icons with relative paths that aren't valid in your build.

您的解决方案是添加适当的图像（根据您对以上所选评论的回答），或确保jQuery UI不会挂在Datepicker中。

Your solutions would be either add the appropriate images (which, based on your response to the comments above you have chosen), or ensure that jQuery UI isn't hooking into your Datepicker.

这篇关于日期选择器缺少引导导航箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！