如何调整jQuery DatePicker控件大小

我第一次使用jQuery DatePicker控件。我已经让它在我的表单上工作了，但它大约是我想要的两倍大，大约是jQuery UI页面上演示的1.5倍大。我是否缺少一些简单的设置来控制大小？

__我找到了一条线索，但它带来了新的问题。在CSS文件中，它声明组件将根据父元素的字体大小进行缩放。他们建议设置

body {font-size: 62.5%;}

使1em=10px.这样做给了我一个大小合适的DatePicker，但显然它搞乱了我的网站的其余部分（我目前的字体大小：.9em）。

我试着在文本框周围添加一个DIV并设置其字体大小，但它似乎忽略了这一点。因此，肯定有一些方法可以通过更改其父级的字体来缩小DatePicker，但我如何做到这一点，而不会弄乱我的网站的其余部分？

212993 次浏览
小开

我想我找到了-我必须进入CSS文件并直接更改DatePicker控件的字体大小。一旦你知道了这一点，就会很明显，但一开始会感到困惑。

小开

我更改了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; }
小开
最佳答案

您不必在jQuery-UI CSS文件中更改它（如果您更改默认文件，可能会令人困惑），如果您添加

div.ui-datepicker{
font-size:10px;
}

在UI文件之后加载的样式表中

如果在声明中在UI-datepicker之后提到UI-widget，则需要DIV.UI-datepicker

小开

我不能添加评论，所以这是参考Keijro接受的答案。实际上，我在样式表中添加了以下内容：

    div.ui-datepicker {
font-size: 62.5%;
}

它也很有效。这可能比10px的绝对值更可取。

小开

打开UI.all.CSS

最后把

@import "ui.base.css";
@import "ui.theme.css";


div.ui-datepicker {
font-size: 62.5%;
}

然后走！

小开

加

div.ui-datepicker, .ui-datepicker td{
font-size:10px;
}
在UI文件之后加载的样式表

中。 这也将调整日期项的大小。

小开

为了让它在Safari 5.1和Rails 3.1中工作，我必须添加：

.ui-datepicker, .ui-datepicker a{
font-size:10px;
}
小开

这对我来说很有效，而且看起来很简单……

$(function() {
$('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});


<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
小开

我使用输入来收集和显示日历，并能够调整日历的大小，我一直在使用以下代码：

div.ui-datepicker, .ui-datepicker input{font-size:62.5%;}

它就像一个符咒。

小开

对我来说，这是最简单的解决方案： 我将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%; }
小开

我尝试了这些例子，但没有成功。显然，页面上的其他样式表正在为不同的标签设置默认字体大小。如果你调整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 th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>

祝你好运！

小开 
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>
小开

我不确定是否有人建议这样做，如果是的话，请忽略我的评论。我今天测试了这个，它对我有用。只需在控件显示前调整字体大小即可：

$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});

使用回调函数beforeShow

小开

我尝试了使用回调函数beforeShow的方法，但发现我还必须设置行高。我的版本看起来像：

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
小开

$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');

小开

更改日历大小的最佳位置是文件jquery-UI.CSS

/* Component containers
----------------------------------*/
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .7em; /* <--default is 1.1em */
}
小开

此代码适用于日历按钮。 数字的大小将通过使用“行高”来增加。

/* 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();

小提琴

小开

Jacob Tsui的解决方案非常适合我：

$('#event_date').datepicker({
showButtonPanel: true,
dateFormat: "mm/dd/yy",
beforeShow: function(){
$(".ui-datepicker").css('font-size', 12)
}
});
小开

我让DatePicker出现在模式中，由于左侧的“日期显示容器”，日历部分不可见，所以我添加了：

.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-UI.CSS '文件中修改如下给定的代码：

div.ui-datepicker {
font-size: 80%;
}

但是，不建议更改默认的“jquery-UI.CSS ”文件，因为该文件可能已在项目中的其他位置使用。更改默认文件中的值可能会更改使用该文件的其他网页中的DatePicker字体。

我使用下面的代码来改变“字体大小”。我把它放在DatePicker（）调用之后，如下所示。

<script>
$(function () {
$( "#datepicker" ).datepicker();
$("div.ui-datepicker").css("font-size", "80%")
});
</script>

希望这对你有帮助..


提交答案