Search code examples
javascriptdjangobootstrap-4icons

Is there a way to change what icon set for tempus dominus datetimepicker?

I've just started using tempusdominus for Bootstrap 4.0. I've got it working all well and integrates nicely with my backend. However, my site is already using an icon set (material-icons) and I want to see if I can use the icons in this font already.

I changed this 

<div class="input-group-text"><i class="fa fa-calendar"></i></div>

To use my icon from material-icons. However, I can't seem to figure out how to change the icon of the clock.

I've located it in the Javascript and also looked at the docs and it only seems possible to me to change which Font Awesome icon you use.

Solution

  • A way I've found is to set each icon you want to change on the picker options:

    

$('#datepicker').datetimepicker({
    viewMode: 'months',
    format: 'MM/YYYY',
    locale: 'pt_BR',
    icons: {
      time: 'mdi mdi-clock',
      previous: 'mdi mdi-arrow-left',
      next: 'mdi mdi-arrow-left',

    }
});