Andrew Mattson Andrew Mattson - 1 year ago 157
HTML Question

Bootstrap navigation arrows missing for datepicker

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.

My html references -

<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 () {
format: 'dd/mm/yyyy',
autoclose: true,
todayBtn: 'linked',
useCurrent: true,
ignoreReadonly: true

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

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

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.

Naughty datepicker

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.

My jfiddle -

JFiddle Coding samples

Answer Source

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.

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.