样式化 jQueryUI DatePicker

Posted 2023-05-07

【中文标题】样式化 jQueryUI DatePicker

【英文标题】：Styling the jQueryUI DatePicker

【发布时间】：2010-11-21 12:08:17

【问题描述】：

我正在使用 jquery 日期选择器 (http://jqueryui.com/demos/datepicker/)。

演示页面上的日期选择器小巧紧凑。但是，当我在我的网站上使用日期选择器时，日历是巨大的。我估计每个日期都使用 12 pt 字体。

如何让天数变小？

【参考方案1】：

简单的答案：您可以在 CSS 中将字体大小添加到“.ui-datepicker”。

但我认为您可能有一些相互冲突的 CSS 规则。您应该使用 Paulo 链接中的方法来检查是否是这种情况。

【参考方案2】：

这有点晚了，但仅供将来参考： 在 jquery ui css 参考之后，在您的 , 之间添加这个。

<style type="text/css">
    .ui-datepicker  font-size: 9pt !important; 
</style>

它会变小。

【参考方案3】：

jquery.ui.theme.css 的最上面一行的字体大小为：

.ui-widget font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; <strong>font-size: .9em;</strong>

【参考方案4】：

您的所有 CSS 规则都没有冲突 - 我可以 100% 自信地验证这一点！

这样做的原因是因为 jQuery 的演示页面可能非常具有误导性。正如 Seth 所说，他们的页面在默认库 CSS 之上添加了许多额外的 CSS 规则。如果你看这里：

http://jqueryui.com/demos/demos.css

您会看到他们使基本字体大小大大减小，这是真正的原因。

我也遇到了同样的问题，我的页面上的日期选择器比他们在演示中的大得多。为了确认 THEIR CSS 是“冲突的”，我使用 Firefox 中 Web Developer Toolbar 的 CSS 菜单单独禁用了上述 CSS 文件，然后他们的演示网站突然间有了大的日期选择器和我的一样大。

因此，这里的最佳答案是不正确的——这与你无关——这完全是他们减少基本尺寸的方式。我向您保证，如果您尝试我在这里提到的内容，您会发现同样的事情。

【参考方案5】：

jQuery UI 有一个theme roller，允许您在下载之前自定义现有主题之一，包括字体、颜色和背景。您可以执行其他操作，例如设置角半径、边距和填充。

我建议您在下载之前尽可能多地对其进行自定义，这样您在网站上使用它时就可以减少修改。

记得在调用 jQuery UI 样式表之后为整个页面设置默认字体大小等。

【参考方案6】：

演示页面有很多额外的 CSS 来“修复”打包的 CSS 中的内容，这些内容在任何地方都没有提及。在我看来，他们在解释这一点上做得很差，尤其是标准 css 使用了多少次 !important。

此外，ThemeRoller 使用 em 作为默认值，它是其他地方设置的字体的 %。

无论如何，日期都是链接，所以要使它们更小，请将大小设置为 9px 左右。

这是我在使用任何 jquery 之前所做的：

h1 font-size:10px;
h2 font-size:11px;
h3 font-size:11px;
p font-size:11px;
a font-size:11px;

【讨论】：

@seth - 如果他不包含 CSS，那么 datepicker 就不是 datepicker。

【参考方案7】：

您的 CSS 声明中是否包含 jquery-ui.css？

此外，示例页面的 CSS 中有一堆字体大小声明。

【参考方案8】：

它们的正文字体大小为 10pt。在 firebug 中删除它，您可能会看到与您在页面上看到的相同的字体大小。