Angular ui-bootstrap datepicker 更改主题

Question

我有一个像这样显示的角度日期选择器 -

这个日期选择器很大，几乎占据了屏幕的 30%，而且日期之间有很大的差距。

现在我怀疑这种情况正在发生，因为我已经为整个项目设置了表格和按钮的样式。如何更改/设置日期选择器的样式，以便我的表格和按钮样式不会影响日期选择器。

P.S：我尝试使用.datepicker 语法对其进行样式设置，但没有奏效。谢谢。

Answer 1

在使用 ui-bootstrap datepicker 时，我的网站也遇到了类似的问题。日期选择器具有许多功能，但找到一种自定义方法变得很痛苦。

针对您的问题，我有几点建议：

• datepicker 将默认使用您网站中 table, th, td, tr 的 CSS。找到一种方法来指定 uib-datepicker-popup 的样式。

• 尝试使用网站文档中提到的自定义模板。 Check this out

此链接将很有用 - http://stackoverflow.com/questions/36801772/how-do-i-change-the-uib-datepicker-popup-button-bar

Answer 2

您实际上需要 CSS 技巧。喜欢：

• 确保在引导代码之后加载自定义样式。
• 让您的选择器更强大，例如 #someContainer div.uib-datepicker {...} 或 #someContainer div.uib-datepicker > table > tbody > tr > td {...}（嗯，使用 css 预处理器很容易做到这一点）
• 轻松编辑ui-boostrap js代码并在其模板中添加一个额外的类，并遵循上述结构

---

顺便说一下，adm-dtp 模块可能更有帮助。