有没有办法更改为 tempus dominus datetimepicker 设置的图标？

Question

我刚刚开始在 Bootstrap 4.0 中使用 tempusdominus。我让它工作得很好，并且与我的后端很好地集成。但是，我的网站已经在使用图标集（材质图标），我想看看是否可以使用此字体中的图标。

我改变了这个

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

使用材料图标中的我的图标。但是，我似乎不知道如何更改时钟的图标。

我已经在 Javascript 中找到了它，并且还查看了文档，对我来说似乎只能更改您使用的 Font Awesome 图标。

Answer 1

我发现的一种方法是在选择器选项上设置要更改的每个图标：

$('#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',

    }
});

Answer 2

我可以使用此代码设置自定义字体：

const td = new tempusDominus.TempusDominus(document.getElementById("birthday_target"), {
    localization: {
        format: 'yyyy-MM-dd',
    },
    display: {
        icons: {
            previous: 'fas fa-solid fa-chevron-left',
            next: 'fas fa-solid fa-chevron-right',
        }
    }
});

这是我的生日元素

<!-- birthdate -->
<div class="h1 mt-20">Birthdate</div>
<div class="row mt-8">
    <div class="col">
        <label class="form-label required">Birthdate</label>
        <div class="input-group" id="birthday_target" data-td-target-input="nearest" data-td-target-toggle="nearest">
            <input v-model="memberNewData.birthday" id="birthday_datepicker" type="text" data-td-target="#birthday_target"
                   class="form-control" @change="onChangeField" />
            <span data-td-toggle="datetimepicker" class="input-group-text" data-td-target="#birthday_target">
                <i class="las la-calendar fs-2"></i>
            </span>
        </div>
        <div class="alert alert-warning" v-if="errors.items && errors.items['birthday']">
            <p v-for="(error, keyError) in errors.items['birthday']" :key="`error-${keyError}`">
                {{ error }}
            </p>
        </div>
    </div>
</div>