时间戳

首页 > 解决方案 > 在引导程序日期选择器（BS v3）中设置自定义主题颜色

javascript - 在引导程序日期选择器（BS v3）中设置自定义主题颜色

问题描述

我有一种情况，用户可以选择不同的主题。问题出在日期选择器上。这个插件的存储库在这里：

GitHub: uxsolutions 引导日期选择器

问题如下图所示：

日期选择器颜色错误

我使用javascript在body标签上设置了前景色和背景色。这些值是从服务器发送的。因此，当颜色为黑底白字时，大多数日期选择器窗口都是空白的。现在，我确实提出了使用日期字段上的单击事件的部分解决方案。该解决方案基本上会查找任何使用 datepicker css 类的 DIV，并将颜色设置为主题颜色。这不是一个理想的解决方案。

我想做的是覆盖 CSS 类本身中的 CSS 颜色属性，但从我在这里的阅读来看，这似乎是不可能的。我仔细研究了代码，它使用 HTML 模板来生成不同的视图。它一次生成所有内容，然后根据用户输入隐藏/显示不同的 DIV 帧。基于它使用查找功能来定位放置物品的事实，我无法真正修改任何东西。没有重写这个插件来接受颜色主题，有没有我没有看到的这个问题的解决方案？

标签： javascripttwitter-bootstrap-3datepicker

解决方案

您绝对可以覆盖该小部件的类。我有一个相关的问题，在我的导航下拉列表中更改颜色会使 datetimepicker 背景变暗，因此我将其添加到在所有 boostrap 样式之后加载的样式表中。

.bootstrap-datetimepicker-widget { background-color: #fff !important; }

在您的情况下，颜色：规则是您需要更改的规则，而不是背景颜色：

确保几件事：

  • 使用!important以便在加载样式后修改内容的任何 javascript 都不会覆盖它
  • 确保特异性水平高于当前默认值

（https://www.w3schools.com/css/css_specificity.asp如果您需要复习一下特异性）

推荐阅读