Eonasdan/bootstrap-datetimepicker arrow icon not s

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 the default option in Javascript using the following code :

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

But nothing seems to be working.

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!