Search code examples
font-awesometempus-dominus-datetimepicker

Tempus Dominus Datetimepicker: Clock icon always displayed even when switching to Date Calendar mode


JSFiddle: https://jsfiddle.net/6nys2puv/

I'm using the following:

  • jQuery 3.6.0
  • Bootstrap 4.6.2
  • Font-Awesome 6.1.0 ("all" files)
  • Tempus Dominus 5.39.0

In the Tempus Dominus datetimepicker, when switching back to the Calendar view from the Time view, the icon is still Clock even though it's supposed to be Calendar. So the Clock icon is incorrectly used for both modes.

Note that the icons are explicitly specified as follows:

$('#datetimepicker1').datetimepicker({
    allowInputToggle: true,
    icons: {
        time: 'far fa-clock',
        date: 'far fa-calendar',
        up: 'fas fa-arrow-up',
        down: 'fas fa-arrow-down',
        previous: 'fas fa-chevron-left',
        next: 'fas fa-chevron-right',
        today: 'far fa-calendar-check-o',
        clear: 'far fa-trash',
        close: 'far fa-times'
    }
});

Anybody know what's wrong here? I got this list from official websites. Note also that the icon is not missing, it's just incorrect.


Solution

  • There were some version incompatibilities. I fixed it by matching it as:

    • jQuery: 3.6.0
    • Bootstrap: 4.6.2
    • Tempus Dominus Bootstrap-4: 5.0.0
    • Font Awesome: 5.1.1