我正在使用此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的许多示例一样可见。我检查了检查元素,它们没有被另一个对象或其他任何东西覆盖。找不到警告或错误。在尝试了所有建议之后,我真的没有想法了。有什么方法可以使它们显示出来,或者如果没有的话,可以使用自定义箭头CSS,但是不希望沿着那条路走。
答案 0 :(得分:1)
您可以在<script>
标记后添加以下内容,这将创建自定义CSS:
<style>
i.custom-button-previous:before {
content: "<<";
}
i.custom-button-next:before {
content: ">>";
}
</style>
这会将给定形状的箭头放在缺少箭头的两个位置内
答案 1 :(得分:0)
在文档中,我发现运行此选择器需要引导css。
在上面提供的代码中,我看不到引导导入,应该是这样的:
导入'bootstrap / dist / css / bootstrap.css';
请尝试导入此内容或更新问题。
答案 2 :(得分:0)
日期选择器为箭头使用字形图标。您能否检查是否在网站中导入了“ 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');}
}
答案 3 :(得分:0)
添加它,对我有用。
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>