vue-bootstrap-datetimepicker 中缺少指向下个月和上个月的箭头？答案

【问题标题】：arrows to next and previous month are missing in vue-bootstrap-datetimepicker?vue-bootstrap-datetimepicker 中缺少指向下个月和上个月的箭头？
【发布时间】：2020-02-09 10:02:03
【问题描述】：

我正在使用这个date picker，它工作正常，但似乎缺少一些 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>

这就是我的日期选择器的样子：

下个月/上个月的箭头不可见，但工作正常。它们应该与library shows 的许多示例一样可见。我检查了检查元素，它们没有被另一个对象或任何东西覆盖。未发现警告或错误。在尝试了关于 SO 建议的所有其他问题的所有建议之后，我真的没有想法。有什么方法可以让它们显示出来，或者如果不是自定义箭头 CSS，但不想走这条路。

【问题讨论】：

您检查过这部分文档吗？ npmjs.com/package/… 看来您可以为每个日期选择器选项设置所需的图标。可能是您安装的图标不是它尝试使用的日期选择器。
@EduardoB.Galán 我确实尝试过，但效果不佳。
也许您正在使用的 datepicker 软件包期望安装某些字体很棒的版本，或者我想到的另一件事是它可能是一些错误的样式导致这些箭头消失(?) 用浏览器检查器深入检查样式是个好主意
@EduardoB.Galán 不幸的是，那里似乎没有任何问题。我也从未想过对代码没有任何问题感到失望：p
请通过 SO sn-p 或 JSFiddle 提供问题示例。

标签： javascript css twitter-bootstrap vue.js bootstrap-datepicker

【解决方案1】：

添加这个，它对我有用。

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

【讨论】：

【解决方案2】：

您可以在 <script> 标记之后添加以下内容，这将生成自定义 CSS：

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

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

这会将给定形状的箭头放在内容中缺少箭头的那两个地方

【讨论】：

【解决方案3】：

日期选择器使用字形图标作为箭头。你能检查一下你的网站是否有“glyphicons-halflings-regular.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');}
}

【讨论】：

不幸的是不是这样
可以在开发工具中启用字体过滤器的chrome中添加网络选项卡的屏幕截图
可以添加截图吗？它将有助于调试。

【解决方案4】：

在文档中，我发现运行这个选择器需要引导 css。

我在上面提供的代码中看不到引导导入，应该类似于：

导入'bootstrap/dist/css/bootstrap.css'；

请尝试导入此问题或更新问题。

【讨论】：

我已经尝试了你的建议，不幸的是它没有帮助