如何设置 bootstrap vue 日期表单选择器的 header 颜色？

Question

我正在使用 bootstrapvue 的表单日期选择器。我如何实现以下目标？

1. 更改 header 颜色，即月份
2. 悬停时更改日期颜色？目前默认为灰色
3. 目前您可以通过 属性 selected-variant 更改所选日期的颜色，但它只接受：

'secondary', 'success', 'danger', 'warning', 'info'

有什么方法可以传递十六进制值吗？

我一直在查看文档，但无法找到上述信息： https://bootstrap-vue.org/docs/components/form-datepicker

Answer 1

给你...

1. Change the header colour, ie where the Month is

.b-calendar .b-calendar-grid-caption {
    background-color: yellow;
}

2. Change the day colour while hovered over? Currently it's grey by default

span.btn.border-0.rounded-circle.text-nowrap.btn-outline-light.text-dark.font-weight-bold:hover {
    background-color: yellow;
}

3. Currently you can change the selected date's colour via the property selected-variant but it only accepts: 'secondary', 'success', 'danger', 'warning', 'info'

[aria-selected="true"] > span {
    background-color: yellow !important;
}