如何调整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; }