如何调整 jQuery DatePicker 控件的大小
Posted
技术标签:
【中文标题】如何调整 jQuery DatePicker 控件的大小【英文标题】：How to resize the jQuery DatePicker control 【发布时间】：2010-10-14 03:51:47 【问题描述】：我是第一次使用 jQuery DatePicker 控件。我已经让它在我的表单上工作，但它大约是我想要的两倍大，大约是 jQuery UI 页面上演示的 1.5 倍。我是否缺少一些简单的设置来控制大小？
编辑：我找到了一条线索，但它带来了新的问题。在 CSS 文件中，它声明组件将根据父元素的字体大小进行缩放。他们建议设置
body font-size: 62.5%;
使 1em = 10px。这样做会给我一个大小合适的日期选择器，但显然它会弄乱我网站的其余部分（我目前有字体大小：.9em）。
我尝试在我的文本框周围放置一个 DIV 并设置其字体大小，但它似乎忽略了这一点。因此，必须有某种方法通过更改其父项的字体来缩小日期选择器，但是我如何在不弄乱我网站的其余部分的情况下做到这一点？
【问题讨论】：
粘贴你的代码，因为我不知道为什么它会更大？您指的是图像按钮还是显示日期的实际日历？ 我注意到 datepicker html 将被插入到任何包含的 div 之外。这就是为什么没有设置 div 的字体大小的原因（除了样式声明需要更具体的事实，就像在 Jimmy Stenke 的回答中一样）。 【参考方案1】：你不用在jquery-ui css文件里改（改默认文件会很混乱），加上就够了
div.ui-datepicker
font-size:10px;
在 ui 文件之后加载的样式表中
如果在声明中 ui-datepicker 之后提到了 ui-widget，则需要 div.ui-datepicker
【讨论】：
“在 ui-files 之后加载的样式表中”这一步非常重要。如果您在 jquery ui 样式表之前加载样式表，您设置的任何属性都将被覆盖。 要根据评论 1 停止覆盖问题 - 您可以这样做：font-size:10px !important; !important 是 hack-ish，我绝对建议不要使用它。 这就是为什么它们被称为级联样式表（CSS） 大声笑甚至没有注意到问题可能是字体大小！谢谢【参考方案2】：我无法添加评论，因此这是参考 Keijro 接受的答案。我实际上在我的样式表中添加了以下内容：
div.ui-datepicker
font-size: 62.5%;
而且效果也很好。这可能比 10px 的绝对值更可取。
【讨论】：
【参考方案3】：不确定是否有人建议以下方式，如果是，请忽略我的 cmets。我今天对此进行了测试，它对我有用。通过在控件显示之前调整字体大小：
$('#event_date').datepicker(
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function()
$(".ui-datepicker").css('font-size', 12)
);
使用beforeShow的回调函数
【讨论】：
我更喜欢这个解决方案【参考方案4】：我在 ui.theme.css 中更改以下行：
.ui-widget font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em;
到：
.ui-widget font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px;
【讨论】：
【参考方案5】：添加
div.ui-datepicker, .ui-datepicker td
font-size:10px;
在 ui 文件之后加载的样式表中。 这也会调整日期项目的大小。
【讨论】：
【参考方案6】：对我来说，这是最简单的解决方案：
我将font-size:62.5%;添加到jquery自定义css文件中的第一个.ui-datepicker标签中：
之前：
.ui-datepicker width: 17em; padding: .2em .2em 0; display: none;
之后：
.ui-datepicker width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%;
【讨论】：
【参考方案7】：我尝试了这些示例但没有成功。显然页面上的其他样式表正在为不同的标签设置默认字体大小。如果你调整 ui-datepicker 你正在改变一个 div。如果更改 div，则需要确保该 div 的内容继承该大小。这就是最终对我有用的方法：
<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar thfont-size:inherit;
div.ui-datepickerfont-size:16px;width:inherit;height:inherit;
.ui-datepicker-title spanfont-size:16px;
</style>
祝你好运！
【讨论】：
【参考方案8】：我使用输入来收集和显示日历，并且能够调整日历的大小我一直在使用此代码：
div.ui-datepicker, .ui-datepicker inputfont-size:62.5%;
它就像一个魅力。
【讨论】：
【参考方案9】：$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');
【讨论】：
【参考方案10】：这对我有用，而且看起来很简单......
$(function()
$('#inlineDatepicker').datepicker(onSelect: showDate, defaultDate: '01/01/2010');
);
<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
【讨论】：
【参考方案11】：with out changing the css file you can also change the calendar size by putting the the following code in to ur <head>.....</head> tag:
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.ui-widget font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em;
</style>
<script>
$(function()
$( "#datepicker" ).datepicker(
//font-size:10px;
//numberOfMonths: 3,
showButtonPanel: true,
showOn: 'button',
buttonImage: "images/calendar1.gif",
buttonImageOnly: true
);
);
</script>
</head>
【讨论】：
【参考方案12】：我尝试了使用回调函数 beforeShow 的方法，但发现我还必须设置行高。我的版本看起来像：
beforeShow: function()$j('.ui-datepicker').css('font-size': 11, 'line-height': 1.2)
【讨论】：
【参考方案13】：更改日历大小的最佳位置是在 jquery-ui.css 文件中
/* Component containers
----------------------------------*/
.ui-widget
font-family: Verdana,Arial,sans-serif;
font-size: .7em; /* <--default is 1.1em */
【讨论】：
【参考方案14】：此代码适用于日历按钮。 使用“line-height”可以增加数字的大小。
/* Change Size */
<style>
.ui-datepicker
font-size:16px;
line-height: 1.3;
</style>
【讨论】：
【参考方案15】：您可以按如下方式更改 jquery-ui-1.10.4.custom.css
.ui-widget
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
【讨论】：
【参考方案16】：另一种方法：
$('.your-container').datepicker(
beforeShow: function(input, datepickerInstance)
datepickerInstance.dpDiv.css('font-size', '11px');
);
【讨论】：
【参考方案17】：$('div.ui-datepicker').css( fontSize: '12px' ); 工作，如果我们在之后调用它
$("#DueDate").datepicker();
Fiddle
【讨论】：
【参考方案18】：Jacob Tsui 解决方案非常适合我：
$('#event_date').datepicker(
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function()
$(".ui-datepicker").css('font-size', 12)
);
【讨论】：
【参考方案19】：我们可以在默认的 'jquery-ui.css' 文件中更改如下代码：
div.ui-datepicker
font-size: 80%;
但是，不建议更改默认的“jquery-ui.css”文件，因为它可能已在项目的其他地方使用过。更改默认文件中的值可能会更改已使用它的其他网页中的日期选择器字体。
我使用下面的代码来改变“字体大小”。我把它放在 datepicker() 调用之后，如下所示。
<script>
$(function ()
$( "#datepicker" ).datepicker();
$("div.ui-datepicker").css("font-size", "80%")
);
</script>
希望这会有所帮助...
【讨论】：
【参考方案20】：我想我找到了——我必须进入 CSS 文件并直接更改 datepicker 控件的字体大小。一旦你知道它就很明显，但一开始会感到困惑。
【讨论】：
【参考方案21】：打开 ui.all.css
放在最后
@import "ui.base.css";
@import "ui.theme.css";
div.ui-datepicker
font-size: 62.5%;
去吧！
【讨论】：
【参考方案22】：要让它在带有 Rails 3.1 的 Safari 5.1 中工作，我必须添加：
.ui-datepicker, .ui-datepicker a
font-size:10px;
【讨论】：
【参考方案23】：我让日期选择器出现在模式中，并且由于左侧的“日期显示容器”，日历部分不在视图中，所以我添加了：
.datepicker-date-display
display: none;
.datepicker-calendar-container
max-height: 21em;
.datepicker-day-button
line-height: 1.2em;
.datepicker-table > thead > tr > th
padding: 0;
【讨论】：
以上是关于如何调整 jQuery DatePicker 控件的大小的主要内容，如果未能解决你的问题，请参考以下文章
如何设置jquery的datepicker，让它进入页面就自动显示在页面的某个位置，而不是点击了才显示
如何在 JQuery Datepicker 中调整下一个和上一个按钮的大小？