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

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

• javascript
• html
• css
• twitter-bootstrap
• datepicker

• your sprite files, are they in the directory that bootstrap is looking for? – VikingBlooded Commented Jul 25, 2016 at 15:24
• In a situation like this a fiddle is probably required so we can check for any conflicts in the various CSS and JS you're using. – Robert Commented Jul 25, 2016 at 15:24
• You should include glyphicons-halflings-regular file – demo Commented Jul 25, 2016 at 15:27
• @demo - I do have that file in the fonts directory, and it does get referenced by the bootstrap.css. However, since it's not using an icon from any font family, why is it needed? When I use the html character coding («) in the body of the page, it shows up fine, FYI. – PoloHoleSet Commented Jul 25, 2016 at 15:35
• @Robert C - I'll check on how to set that up and will edit when I it's done. Thanks! – PoloHoleSet Commented Jul 25, 2016 at 15:35

3 Answers 3

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

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 ments above you have chosen), or ensure that jQuery UI isn't hooking into your Datepicker.

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