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

Question

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

Answer 1

您需要覆盖所选日期的样式。为此，请参考 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;
}

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

Answer 2

要覆盖现有的日期选择器CSS，请使用下面的CSS。

.datepicker td,th{
    text-align: center;
    padding: 8px 12px;
    font-size: 14px;
}

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

Bootstrap Datepicker - Custom Styles

css

jquery

styles

bootstrap-datepicker