设计jQueryUI DatePicker

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

我如何得到更小的日子？

2009-08-20 Villager

简单的答案：你可以在你的css中添加一个字体大小为“.ui-datepicker”。

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

2009-08-20 22:41:34 MrHus

你在CSS声明中包含jquery-ui.css吗？

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

2009-08-20 22:35:50 seth

它们的字体大小为10pt。删除在萤火虫，你可能会看到相同的字体大小，你看到的页面上。

2009-08-20 22:38:46 redsquare

jQuery UI有一个theme roller，允许您在下载之前自定义现有主题之一，包括字体，颜色和背景。你可以做其他的事情，比如设置圆角半径，边距和填充。

我建议尽量尝试在之前对其进行自定义下载，这样在网站上使用它时就不需要修改了。

记得在之后的整个页面中设置默认的字体大小，你调用了jQuery UI样式表。

2009-08-20 23:28:00 eksith

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

原因是因为jQuery的演示页面可能非常容易让人误解。正如Seth所说，他们的页面在默认库CSS的顶部添加了很多额外的CSS规则。如果你看看这里：

你会看到他们正在基本字体大小相当小，这是真正的原因。

我也得到了相同的确切问题，我在页面上获得的日期选择器比他们的演示版本大得多。为了确认它是“冲突”的CSS，我使用Firefox中的Web Developer Toolbar的CSS菜单来单独禁用上述CSS文件，然后突然他们的演示站点只有大量的日期选择器与我的尺寸相同。

因此，这里最好的答案是不正确的 - 它不是你的目的 - 它完全是如何减小基本尺寸的。我向你保证，如果你尝试我在这里提到的，你会发现同样的事情。

2010-07-06 13:08:47 Lev

的jquery.ui.theme.css极顶线有字体大小：

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

2010-10-30 20:05:57 Clay

演示页面有相当多的额外的CSS来“修复”出现什么在包装CSS，他们不提任何地方。在我看来，他们在解释这个问题上表现不佳，特别是标准CSS使用多少次！很重要。

另外，ThemeRoller使用em作为默认值，这是其他地方设置的字体的百分比。

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

这是我做什么之前，我使用任何的jQuery：

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

2012-10-07 01:21:23

@seth - 如果他没有包含CSS，则日期选择器不会是日期选择器。 – 2012-10-07 01:27:00

这是一个有点晚，但仅在将来参考：添加这是你之间的jQuery UI的CSS引用后。

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

它会变小。

2012-12-11 05:38:16

回答