时间戳

首页 > 解决方案 > Bootstrap Datepicker - 自定义样式

jquery - Bootstrap Datepicker - 自定义样式

问题描述

我在我的应用程序中使用 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（基于上面的代码）：

在此处输入图像描述

标签： jquerycssstylesbootstrap-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;
}

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

推荐阅读