стрелки в следующий и предыдущий месяц отсутствуют в vue-bootstrap-datetimepicker?

Question

Я использую средство выбора даты , которое работает нормально, но, похоже, отсутствует какой-то CSS. Я перепробовал множество предложений, чтобы этот CSS работал, но безуспешно. Это мой текущий (соответствующий) код:

<template>
    <div class="row">
        <div class="col-lg-4">
            <div class="input-group">
                <date-picker
                        name="start-date"
                        ref="startDate">
                </date-picker>
                <div class="input-group-prepend">
                    <button class="btn btn-outline-primary" type="button" @click="$refs.startDate.dp.show()">
                        <font-awesome-icon icon="calendar-alt"></font-awesome-icon>
                    </button>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="input-group">
                <date-picker
                        name="end-date"
                        ref="endDate">
                </date-picker>
                <div class="input-group-prepend">
                    <button class="btn btn-outline-primary" type="button" @click="$refs.endDate.dp.show()">
                        <font-awesome-icon icon="calendar-alt"></font-awesome-icon>
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    import datePicker from 'vue-bootstrap-datetimepicker';
    // Import date picker css
    import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';


    export default {
        name: "DateRange",
        components: {
            myDatePicker,
        },
        date: {
            startDate: '2019-10-10',
            endDate:   '2019-09-09'
        }
    }
</script>

А вот так выглядит мой указатель даты:

Стрелкидо следующего / предыдущего месяца не видны, но они работают нормально. Они должны быть видны, так как многие из примеров, которые библиотека показывает . Я проверил элемент проверки, и они не были перезаписаны другим объектом или чем-либо еще. Предупреждений или ошибок не обнаружено. Я действительно вне идей после того, как попробовал все предложения, все остальные вопросы здесь на SO предлагают. Есть ли способ заставить их отображаться или нет, может быть, пользовательские стрелки CSS, но предпочли бы не идти по этому пути.

Answer 1

Вы можете добавить следующее после вашего тега <script>, и это создаст пользовательский CSS:

<style>
    i.custom-button-previous:before {
        content: "<<";
    }

    i.custom-button-next:before {
        content: ">>";
    }
</style>

Это поместит стрелки заданной формы в содержимое в тех двух местах, где находятся стрелки. отсутствует

Answer 2

Средство выбора даты использует значки глифов для стрелок. Можете ли вы проверить, есть ли у вас файл "glyphicons-halflings-normal.woff", импортируемый на ваш сайт, если не указан ниже css

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff'), url('http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/fonts/glyphicons-halflings-regular.woff') format('woff');}
}

Answer 3

В документации я обнаружил, что для запуска этого средства выбора требуется программа начальной загрузки.

Я не вижу импорта начальной загрузки в вашем кодеВыше приведено что-то вроде:

import 'bootstrap / dist / css / bootstrap.css';

Пожалуйста, попробуйте импортировать это или обновить вопрос.