Eonasdan/bootstrap-datetimepicker arrow icon not showing on Safari and showing blue squares on Chrome

Question

My Datetime picker is working fine but the arrow to navigate through time and day are not showing properly.

Safari

Chrome

I\'ve tried to set back th

Answer 1

maybe there's no glyphicon in your boostrap or something wrong with it so that nothing happend, first workaround is: implement fontAwesome then set:

$('.yourSelector').datetimepicker({         
     fontAwesome:'font-awesome'     
});

second workaround: open boostrap-datetimepicker.js then replace

 headTemplateV3:   '<thead>' +
                      '<tr>' +
                      '<th class="prev"><i class="icon icon-arrow-left"></i> </th>' +
                      '<th colspan="5" class="switch"></th>' +
                      '<th class="next"><i class="icon icon-arrow-right"></i> </th>' +
                      '</tr>' +
    '</thead>',

width

headTemplateV3:   '<thead>'+
                    '<tr>'+
                        '<th class="prev"><i class="glyphicon glyphicon-arrow-left"/></th>'+
                        '<th colspan="5" class="switch"></th>'+
                        '<th class="next"><i class="glyphicon glyphicon-arrow-right"/></th>'+
                    '</tr>'+
                '</thead>',

good luck!

Answer 2

If you're using Bootstrap V4, Glyphicons have been been removed. I fixed the missing arrow by using Fontawesome. Add these to the icons option.

    $('.dateP').datetimepicker(
    {

        icons: 
        {
            next: 'fa fa-angle-right',
            previous: 'fa fa-angle-left'
        },
        format: 'DD/MM/YYYY',

        widgetPositioning: {
            horizontal: 'right',
            vertical: 'auto'
        }
    });

Answer 3

   $('.dateP').datetimepicker(
    {

        icons: 
        {
            up: 'fa fa-angle-right',
            down: 'fa fa-angle-left'
        }
  });

In this way you can use your custom icons as glyphicons have been deprecated!