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