如何调整jQuery DatePicker控件的大小
我第一次使用jQuery DatePicker控件。 我已经在我的表单上工作了，但是它大约是我想要的两倍，而且大约是jQuery UI页面上的演示的1.5倍。 是否有一些简单的设置，我错过了控制大小？
编辑：我发现了一个线索，但它开辟了新的问题。 在CSS文件中，它声明组件将根据父元素的字体大小进行缩放。 他们推荐设置
body {font-size: 62.5%;} 使1em = 10px。 这样做给了我一个很好的dateselect器，但显然它弄乱了我的网站的其余部分（我目前有font-size：.9em）。
我试着在我的文本框中添加DIV并设置字体大小，但似乎忽略了这一点。 因此，必须通过更改其父级的字体来缩小dateselect器的某种方式，但是如何做到这一点，而不会弄乱我的网站的其余部分？
你不必在jquery-ui css文件中改变它（如果你改变默认的文件可能会引起混淆），添加它就足够了
div.ui-datepicker{ font-size:10px; }
在ui-files之后加载的样式表中
如果在声明中的ui-datepicker之后提到了ui-widget，则需要使用div.ui-datepicker
我不能添加评论，所以这是参考Keijro接受的答案。 实际上我将下面的内容添加到了我的样式表中：
div.ui-datepicker { font-size: 62.5%; }
而且它也起作用。 这可能比10px的绝对值更可取。
不知道是否某个机构提出了下面的方式，如果是的话，只是忽略我的意见。 我今天testing了这个，它适用于我。 通过在显示控件之前调整字体大小：
$('#event_date').datepicker({ showButtonPanel: true, dateFormat: "mm/dd/yy", beforeShow: function(){ $(".ui-datepicker").css('font-size', 12) } });
使用beforeShow之前的callback函数
我更改了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; }
加
div.ui-datepicker, .ui-datepicker td{ font-size:10px; }
在ui-files之后加载的样式表中。 这也将调整date项目的大小。
对我来说，这是最简单的解决scheme：我添加了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%; }
我正在尝试这些例子没有成功。 显然，页面上的其他样式表为不同的标签设置了默认的字体大小。 如果你调整你的dateselect器，你正在改变一个div。 如果你改变一个div你需要确保该div的内容inheritance这个大小。 这是最后为我工作的：
<style type="text/css"> .ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;} div.ui-datepicker{font-size:16px;width:inherit;height:inherit;} .ui-datepicker-title span{font-size:16px;} </style>
祝你好运！
我正在使用一个input来收集和显示日历，并能够调整日历我一直在使用这个代码：
div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}
它像一个魅力。
$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');
这对我来说似乎很简单…
$(function() { $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'}); }); <div style="font-size:75%";> <div id="inlineDatepicker"></div> </div>
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>
我试图使用callback函数beforeShow的方法，但发现我还必须设置行高。 我的版本看起来像：
beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
更改日历大小的最佳位置是在文件jquery-ui.css中
/* Component containers ----------------------------------*/ .ui-widget { font-family: Verdana,Arial,sans-serif; font-size: .7em; /* <--default is 1.1em */ }
此代码将在日历button上工作。 数字的大小将通过使用“行高”来增加。
/* Change Size */ <style> .ui-datepicker{ font-size:16px; line-height: 1.3; } </style>
你可以改变jquery-ui-1.10.4.custom.css，如下所示
.ui-widget { font-family: Lucida Grande,Lucida Sans,Arial,sans-serif; font-size: 0.6em; }
另一种方法：
$('.your-container').datepicker({ beforeShow: function(input, datepickerInstance) { datepickerInstance.dpDiv.css('font-size', '11px'); } });
$('div.ui-datepicker').css({ fontSize: '12px' }); 如果我们在$("#DueDate").datepicker();之后调用它的话$("#DueDate").datepicker();
小提琴
Jacob Tsui解决scheme适合我：
$('#event_date').datepicker({ showButtonPanel: true, dateFormat: "mm/dd/yy", beforeShow: function(){ $(".ui-datepicker").css('font-size', 12) } });
我想我find了 – 我必须进入CSS文件并直接更改datepicker控件的字体大小。 很明显，一旦你知道它，但首先混乱。
打开ui.all.css
最后放
@import "ui.base.css"; @import "ui.theme.css"; div.ui-datepicker { font-size: 62.5%; }
去 ！
为了在Safari 5.1中使用Rails 3.1，我必须添加：
.ui-datepicker, .ui-datepicker a{ font-size:10px; }
