【问题标题】：jQuery DatePicker Too LargejQuery DatePicker 太大
【发布时间】：2011-10-08 15:15:09
【问题描述】：

我已经实现了 jQuery 日期选择器。它似乎工作正常，但日历太大了。

jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png

我正在处理的网站有许多层样式表、父页面和控件。而且我似乎无法隔离是什么使它变大。（抱歉，该网站不公开。）

日历似乎是基于字体大小的。我尝试将我的文本框包装在一个字体较小的 div 中，但它似乎忽略了这一点。有没有办法指定固定的字体大小？

【问题讨论】：

标签： jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

虽然更改 .ui-widget 的字体大小有效，但我通过以下方式获得了最佳结果。

#ui-datepicker-div { font-size:11px; }

这似乎不仅完全符合我的需要，而且不太可能影响任何其他 jquery-ui 小部件。

【讨论】：

给新手的一句话：不要害怕在这里使用 # (id) 选择器。即使您在页面上使用多个带有日期选择器的组件，也只有一个日期选择器实例浮动（否则会非常浪费）。就我个人而言，我在一个包含 +20 条记录的数据表上测试了这个解决方案，并且效果很好。

【解决方案2】：

尝试为班级.ui-datepicker设置font-size

.ui-datepicker {font-size:11px;}

http://jsfiddle.net/pxfunc/ps5cA/

【讨论】：

我可以使用.ui-datepicker { font-size: 1px; }，但没有效果。它似乎被.ui-widget 覆盖，这令人困惑，因为它设置了一个相对大小：1.1em。更改此确实会影响它。但仅相对于其他字体。
您的 css 是在 HTML 中的 jquery-ui css 之后声明的（<link> 或 <style> 标签）？或作为硬编码替代集font-size:11px!important
这是一个巨大的项目，需要付出一些努力来确定包含的所有内容和顺序。它可能是在其他设置之前定义的。但我很幸运能设置#ui-datepicker-div。请参阅我的最新帖子。

【解决方案3】：

需要对 firebug 进行一些挖掘，但我已经包含了我用来减少它的版本之一。关键是从 jQuery-ui CSS 文件中复制准确的样式，并将它们放在您需要的页面头部或 jQuery-ui 样式表之后的 CSS 样式表中。

.ui-datepicker {
    padding: 0.1em 0.1em 0;
    width: 11em;
}

.ui-widget {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
}

.ui-datepicker th {
    border: 0 none;
    font-weight: normal;
    padding: 0.2em 0.1em;
    text-align: center;
}

.ui-datepicker th span {
    font-size: 11px;
}

.ui-datepicker td span, .ui-datepicker td a {
    padding: 0.1em;
}

.ui-datepicker td {
    padding: 0.9px;
}

.ui-datepicker .ui-state-highlight {
    height: 12px;
    margin-bottom: 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    font-size: 10px;
    font-weight: normal;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title {
    line-height: 13px;
}

.ui-datepicker .ui-datepicker-title span {
    font-size: 11px;
}

.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {
    margin-left: -8px;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {
    height: 15px;
    top: 1px;
    width: 15px;
}

.ui-datepicker-next-hover .ui-icon {
    height: 16px;
    width: 16px;
}

【讨论】：

谢谢，但奇怪的是，这会使字体变小，但日历的大小却完全相同。看起来我没有 Firebug。 Chrome 有一些查看样式的工具，但它似乎没有告诉我我需要知道什么。
只需使用 Firefox 浏览器并安装 firebug 插件，它可以让您更好地查看生成的 CSS 样式...我会仔细检查是否在某处遗漏了样式。
你能发布你是如何添加 CSS 样式的吗？您是否可以将覆盖样式直接添加到其中一个页面的头部
这是一个包含多层文件的庞大项目。我只是将您的样式附加到标准 CSS 文件之一。之后可能会出现一些 jquery-ui CSS 文件。无论如何，我设置#ui-datepicker-div 的结果非常好。请参阅我的最新帖子。
使用旧版本的 jquery (1.11.3)，对我来说这是唯一的方法。谢谢。

【解决方案4】：

将此添加到 site.css 对我有用

.ui-widget {
    font-size: .7em !important;
  }

【讨论】：

【解决方案5】：

您可以按如下方式更改“jquery-ui-1.10.4.custom.css”

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}

【讨论】：

【解决方案6】：

我们的日历又大又丑，很难点击月份箭头。这是由于 jquery-ui css 和 jquery-ui js 包含的版本不匹配造成的。

版本号必须匹配，例如

jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js

但也需要上面推荐的css

#ui-datepicker-div { font-size:11px; }

【讨论】：

【解决方案7】：

我同意 mdmullinax。您必须更改整个班级的字体大小

.ui-datepicker-div { 字体大小：11px; }

因为 datepicker 不受 id 控制，所以下面的变化对大小没有影响

ui-datepicker-div { 字体大小：11px; }

h

【讨论】：