jQuery DatePicker 太大

Posted 2023-05-07

【中文标题】jQuery DatePicker 太大

【英文标题】：jQuery DatePicker Too Large

【发布时间】：2011-10-08 15:15:09

【问题描述】：

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

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

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

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

【参考方案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