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>&nbsp; &nbsp; i.custom-button-previous:before {&nbsp; &nbsp; &nbsp; &nbsp; content: "<<";&nbsp; &nbsp; }&nbsp; &nbsp; i.custom-button-next:before {&nbsp; &nbsp; &nbsp; &nbsp; content: ">>";&nbsp; &nbsp; }</style>这会将给定形状的箭头放在内容中缺少箭头的两个位置

Answer 2

在文档中，我发现需要 bootstrap css 来运行这个选择器。我在上面提供的代码中看不到引导程序导入，它应该是这样的：导入 'bootstrap/dist/css/bootstrap.css';请尝试导入此内容或更新问题。

Answer 3

日期选择器使用字形图标作为箭头。你能检查一下你的网站中是否导入了“glyphicons-halflings-regular.woff”文件，如果没有包含在css下面@font-face {&nbsp; font-family: 'Glyphicons Halflings';&nbsp; 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');}}