blocks|key|1534693|text|简单的答案是:你可以在你的css中添加一个字体大小到".ui-datepicker“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1534694|但是我认为你可能有一些相互冲突的css规则。您应该使用Paulo的链接中的方法来检查是否是这种情况。|1534695|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The simple answer: You could add a font size in your css to ".ui-datepicker".

But I think you may have some css rules that are conflicting. You should use the method from Paulo's link to check if this is the case.

blocks|key|1339050|text|这有点晚了，但仅供将来参考:在jquery+ui+css引用之后，在您的之间添加此代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1339051|<style+type="text/css">
++++.ui-datepicker+{+font-size:+9pt+!important;+}
</style>|code-block|syntax|javascript|1339052|它会变得更小。|1339053|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

This is a bit late, but for future reference only:
Add this between your , after the jquery ui css reference.

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

and it will become smaller.

blocks|key|1338993|text|jquery.ui.theme.css的最上面一行的字体大小如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1338994|.ui-widget+{+font-family:+Trebuchet+MS,+Tahoma,+Verdana,+Arial,+sans-serif;+font-size:+.9em;+}|BOLD|1338995|entityMap^0|0|J|0|0|23|24|G|2L|1|24|G|0^^$0|@$1|2|3|4|5|6|7|K|8|@$9|L|A|M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|H]]|D|@]|E|$]]|$1|I|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|J|$]]

The very top line of <code>jquery.ui.theme.css</code> has the font size:

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

blocks|key|1338974|text|你的CSS规则都不冲突--我可以100%25的自信地验证这一点！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1338975|这样做的原因是因为jQuery的演示页面可能非常容易产生误导。正如Seth所说，他们的页面在默认库CSS之上添加了很多额外的CSS规则。如果你看这里：|1338976|http://jqueryui.com/demos/demos.css|offset|length|1338977|你会看到他们把基本字体变小了很多，这才是真正的原因。|1338978|我也遇到了同样的问题，我的页面上的日期选择器比他们的演示中的要大得多。为了确认他们的CSS是“冲突的”，我使用Firefox中Web开发人员工具栏的CSS菜单单独禁用了上面提到的CSS文件，然后突然他们的演示站点有了和我一样大小的日期选择器。|1338979|因此，这里最好的答案是不正确的-这对你来说没有什么-这完全是他们如何减少基本大小的。我向你保证，如果你尝试我在这里提到的东西，你会找到同样的东西。|1338980|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Z|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@$F|X|G|Y|1|Z]]|A|$]]|$1|H|3|I|5|6|7|10|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|E]]]]

None of your CSS rules are conflicting - I can verify this with 100% confidence!

The reason for this is because jQuery's demo pages can be VERY misleading. As Seth said, their pages have lots of extra CSS rules added on top of the default library CSS. If you look here:

<a href="http://jqueryui.com/demos/demos.css" rel="noreferrer">http://jqueryui.com/demos/demos.css</a>

You will see they are making the base font size considerably smaller, which is the real cause.

I too was getting the same exact issue where I was getting a much larger date picker on my pages than they had on their demo. To confirm it was THEIR CSS which was "conflicting", I used the CSS menu of the Web Developer Toolbar in Firefox to disable the above stated CSS file alone, and then all of the sudden THEIR demo site had large date pickers just the same size as mine.

Thus, the best answer here is incorrect - it is nothing on your end - it is entirely how THEY have decreased the base size. I guarantee you that if you try what I have mentioned here you will find the same thing.

blocks|key|233102|text|jQuery+UI有一个theme+roller，允许你在下载之前自定义一个现有的主题，包括字体，颜色和背景。你还可以做其他的事情，比如设置边角半径、边距和填充。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|233103|我建议您在下载之前尽可能多地对其进行自定义，这样您在网站上使用它时就会有更少的修修补补。|233104|记得在调用jQuery+UI样式表之后为整个页面设置默认字体大小等。|233105|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/themeroller/^0|C|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

jQuery UI has a <a href="http://jqueryui.com/themeroller/" rel="noreferrer">theme roller</a> that allows you to customize one of the existing themes including the fonts, colors and backgrounds before downloading. You can do other things like set the corner radius, margins and padding.

I'd recommend trying to customize it as much as you can before downloading so you'll have less to tinker when using it on your site.

Remember to set the default font sizes and such for the whole page after you've called the jQuery UI stylesheet.

blocks|key|1339024|text|演示页面有相当多的额外CSS来“修复”他们没有提到的打包CSS中的内容。在我看来，他们在解释这一点上做得很差，特别是标准css使用了多少次！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1339025|此外，ThemeRoller使用em作为默认值，这是其他地方设置的字体的%25。|1339026|无论如何，日期是链接，所以为了使它们更小，将大小设置为9px左右。|1339027|下面是我在使用任何jquery之前所做的事情：|1339028|h1+{font-size:10px;}
h2+{font-size:11px;}
h3+{font-size:11px;}
p+{font-size:11px;}
a+{font-size:11px;}|code-block|syntax|javascript|1339029|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

The demo pages have quite a bit of extra CSS to 'fix' what comes in the packaged CSS that they don't mention anywhere. In my opinion, they do a poor job explaining this, especially with how many time the standard css uses !important.

Also, the ThemeRoller uses em as the default, which is % of a font set elsewhere.

Anyway, the dates are links, so to make them smaller, set a size for a around 9px.

Here's what I do before I use any jquery:

<pre><code>h1 {font-size:10px;}
h2 {font-size:11px;}
h3 {font-size:11px;}
p {font-size:11px;}
a {font-size:11px;}
</code></pre>

blocks|key|233068|text|您是否在CSS声明中包含jquery-ui.css？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|233069|此外，示例页面的CSS中有一组字体大小声明。|233070|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Are you including jquery-ui.css in your CSS declarations?

Also, the example page has a bunch of font-size declarations in its CSS.

blocks|key|233035|text|他们的身体上有10磅的字体大小。在firebug中将其删除，您可能会看到与您在页面上看到的相同的字体大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|233036|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

They have a font-size of 10pt on the body. Remove that in firebug and youll probably see the same font sizes that your seeing on your page.

I am using the jquery datepicker (<a href="http://jqueryui.com/demos/datepicker/" rel="noreferrer">http://jqueryui.com/demos/datepicker/</a>).

The datepicker on the demo page is small and compact. However, when I use the datepicker on my site, the calendar is HUGE. I would estimate that each date is using 12 pt font.

How do I get the days to be smaller?

Styling the jQueryUI DatePicker

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我使用的是jquery datepicker ()。演示页面上的datepicker小巧而紧凑。然而，当我在我的网站上使用datepicker时，日历很大。我估计每个日期都使用12磅的字体。我怎样才能让日子变得更短？

问设置jQueryUI DatePicker的样式
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置jQueryUI DatePicker的样式EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置jQueryUI DatePicker的样式
EN