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.

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.

• javascript
• css
• twitter-bootstrap

Share Improve this question Follow asked Apr 8, 2017 at 22:01 Hugo HyzHugo Hyz 5122 silver badges1010 bronze badges 2

• Do you see any errors in console? Be sure that all css and font were loaded properly. – VincenzoC Commented Apr 10, 2017 at 21:56
• No error in console. Icons e from bootstrap and are imported with the following link : <link href="bootstrap.css" rel="stylesheet" media="screen"> ? – Hugo Hyz Commented Apr 11, 2017 at 14:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

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!

   $('.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!