Icons of datetimepicker not showing

Question

I use bootstrap 4,fontawesome v5.7 and this plugin https://tempusdominus.github.io/bootstrap-4/Usage/

The calendar its working but my probleme is the icons is not showing

Look this screen:

ref https://stackoverflow.com/questions/31601942/calendar-not-showing-up-in-bootstrap-datetimepicker — Deepak A, Mar 25 '19 at 12:04
Someone else brought up this issue in Github, so maybe this will help: https://github.com/tempusdominus/bootstrap-4/issues/127 — Doug F, Mar 25 '19 at 12:19

score 8 · Answer 1 · answered Mar 25 '19 at 13:18

The Following code solved my issue.

$.fn.datetimepicker.Constructor.Default = $.extend({},
            $.fn.datetimepicker.Constructor.Default,
            { icons:
                    { time: 'fas fa-clock',
                        date: 'fas fa-calendar',
                        up: 'fas fa-arrow-up',
                        down: 'fas fa-arrow-down',
                        previous: 'fas fa-arrow-circle-left',
                        next: 'fas fa-arrow-circle-right',
                        today: 'far fa-calendar-check-o',
                        clear: 'fas fa-trash',
                        close: 'far fa-times' } });

+1 answer completed with result in image, but please avoid answer code with images. In the official doc suggest do it before the init. — Leandro Bardelli, Oct 01 '20 at 13:58

score 1 · Answer 2 · answered Sep 23 '19 at 14:18

I was using Version 5.8 of font awesome and having this issue. Changing

fa-clock-o

to

fa-clock

within the following file fixed it for me -

tempusdominus-bootstrap-4.js

Looks as though FontAwesome has changed the name of the clock icon in version 5.

score 0 · Answer 3 · answered Oct 01 '20 at 13:50

Information about this can be found in the official doc: https://tempusdominus.github.io/bootstrap-4/Options/

Global defaults can be get/set by $.fn.datetimepicker.Constructor.Default

e.g. To set icons to use Font Awesome 5

$.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
            icons: {
                time: 'far fa-clock',
                date: 'far fa-calendar',
                up: 'far fa-arrow-up',
                down: 'far fa-arrow-down',
                previous: 'far fa-chevron-left',
                next: 'far fa-chevron-right',
                today: 'far fa-calendar-check-o',
                clear: 'far fa-trash',
                close: 'far fa-times'
            } });

Do this before you init pickers.

Also in the official doc: https://tempusdominus.github.io/bootstrap-4/Usage/#custom-icons

Custom Icons

<div class="container">
    <div class="col-sm-6">
        <div class="form-group">
            <div class="input-group date" id="datetimepicker9" data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker9"/>
                <div class="input-group-append" data-target="#datetimepicker9" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker9').datetimepicker({
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                }
            });
        });
    </script>
</div>

Icons of datetimepicker not showing

3 Answers3