Bootstrap 日期选择器 - 自定义样式

问题描述

我在我的应用程序中使用 Bootstrap Datepicker（请参阅：https://bootstrap-datepicker.readthedocs.io/en/latest/index.html）并将其设置为如下所示的工作方式。我没有代码问题，日期选择器按预期工作，但是，我希望更改插件的样式。除了编辑默认的样式表和颜色，让活动日不再显示为默认的蓝色，还有其他方法可以自定义活动日的 CSS 吗？我已深入查看文档，但似乎找不到任何有用的东西。

<head>
<link rel="stylesheet" href="/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
</head>

<div class="form-group mb-0" id="bootstrap-datepicker">
<input class="form-control" type="text" data-provide="datepicker" id="startDate" name="StartDate" value="">
</div>

<script src="/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script>
$('#bootstrap-datepicker input').datepicker({
                format: "dd/mm/yyyy",toggleActive: true,todayBtn: "linked",changeMonth: true,changeYear: true
            });
</script>

Boostrap Datepicker（基于上面的代码）：

解决方法

您需要覆盖所选日期的样式。为此，请参考 td.active 选择器，它默认包含以下规则：

color
background-color
border-color
text-shadow

此外，使用 !important 分配任何参数而不是当前参数，并将它们插入到您的 css 中。例如：

td.active {
    color: unset!important;
    background-color: unset!important;
    border-color: unset!important;
    text-shadow: unset;
}

在示例中，我关闭了所选日期的选择器的所有规则，但您可以保留任何需要打开的规则。为此，只需不要在覆盖的选择器中指定所需的规则。

bootstrap-datepicker jquery styles