Eonasdan/bootstrap-datetimepicker Arrow Icon Not Showing On Safari And Showing Blue Squares On Chrome

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 the default option in Javascript u

Solution 1:

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

Solution 2:

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!

Solution 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!