CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapbootstrap-datetimepickersmalot-datetimepicker
tayden
tayden

Reputation: 99

smalot/bootstrap-datetimepicker navigation arrows missing

I'm having problems getting the arrows showing in the Bootstrap3 version of DateTime Picker (https://github.com/smalot/bootstrap-datetimepicker).

The example provided with the download is also missing the arrows, but the bootstrap2 example has them.

Everything else is working correctly and clicking the location where the arrows should be navigate as expected. I'm assuming that the browser is searching for the icons and they're where they're supposed to be.

Wondering if anyone has run into this issue and knows how to fix it? Otherwise maybe some suggestions as to how to troubleshoot would be appreciated.

Upvotes: 2

Views: 7605

Answers (4)

Riri
Riri

Reputation: 1

I was hosting the material-icon files locally.. this gave me serious issues. As soon as I defaulted back to the old link rel (snippet below), all IE problems were resolved...

Not sure what causes it.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Upvotes: 0

pleerock
pleerock

Reputation: 18846

Just check if your minDate and maxDate options are correct, because if they are not correct arrows can be missing

Upvotes: 0

Anthony
Anthony

Reputation: 11

This drove me crazy for a while. The solution I found was to search the timepicker.js file for 'chevron' and change to the correct bootstrap format:

I was going to post an image but stackoverfow won't let me :(

So, search timepicker.js for 'chevron' and replace this:

<i class="icon-chevron-down"></i>

with this:

<i class="glyphicon glyphicon-chevron-down"></i>

Upvotes: 1

tayden
tayden

Reputation: 99

This issue was resolved with a recent update to the repo. Otherwise, searching and replacing the following lines in ../bootstrap-datetimepicker.js has the same effect:

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

with:

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

Upvotes: 7

Related Questions