jQuery DatePicker 太大

Question

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

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

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

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

Answer 1

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

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

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

Answer 2

尝试为 .ui-datepicker 类设置 font-size

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

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

Answer 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;
}

Answer 4

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

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

Answer 5

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

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

Answer 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; }

Answer 7

我同意 mdmullinax 的观点。您必须更改整个类的字体大小

.ui-datepicker-div { font-size:11px;因为

datepicker 不受 id 控制，所以下面的更改对大小没有影响

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

小时