Bootstrap navigation arrows missing for datepicker

Question

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 () {
        $(".datepicker").datepicker({
            format: 'dd/mm/yyyy',
            autoclose: true,
            todayBtn: 'linked',
            useCurrent: true,
            ignoreReadonly: true
        })
    });
</script>

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

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.

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 1

This might happen because of the icons for these arrows are not found.

1. Go to bootstrap-datetimepicker.min.js and search for 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" }, 
   
   
   

2. Make sure these two classes have the style which their value appears on the list above

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

3. Try to change glyhpicon to other icons if step 2 doesn't work

Answer 2

I have solved it:

<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");

});

Remove the class of the tag on and later assign a font-awesome arrow class

Answer 3

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.