设置jQueryUI DatePicker的样式

Question

演示页面上的日期选择器小而紧凑.但是,当我在我的网站上使用datepicker时,日历是巨大的.我估计每个日期都使用12磅字体.

如何让日子缩小？

Answer 1

答案很简单:您可以在css中添加字体大小为".ui-datepicker".

但我认为你可能有一些相互矛盾的css规则.您应该使用Paulo的链接中的方法来检查是否是这种情况.

Answer 2

这有点晚了,但仅供将来参考:在jquery ui css引用之后添加此内容.

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

它会变小.

Answer 3

最顶行jquery.ui.theme.css的字体大小:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: .9em; }

Answer 4

您的CSS规则都没有冲突 - 我可以100%放心地验证这一点!

原因是因为jQuery的演示页面可能会非常误导.正如Seth所说,他们的页面在默认库CSS之上添加了许多额外的CSS规则.如果你看这里:

您会看到它们使基本字体大小相当小,这才是真正的原因.

我也得到了同样的问题,我在我的网页上获得了比他们的演示更大的日期选择器.为了确认它是"冲突"的THEIR CSS,我使用了Firefox中的Web Developer Toolbar的CSS菜单来单独禁用上述CSS文件,然后所有突然的THEIR演示站点都有相同大小的大型日期选择器像我一样.

因此,这里最好的答案是不正确的 - 这不是你的结果 - 它完全是他们如何减少基本尺寸.我保证,如果你尝试我在这里提到的,你会发现同样的事情.

Answer 5

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

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

在调用jQuery UI样式表后,请记住设置整个页面的默认字体大小.