如何调整jQuery DatePicker控件的大小

195

我第一次使用jQuery DatePicker控件。我已经可以在表单上使用它了，但是它大约是我想要的两倍，并且是jQuery UI页面上演示的1.5倍。我缺少一些简单的设置来控制尺寸吗？

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

body {font-size: 62.5%;}

使1em = 10px。这样做为我提供了一个大小适中的日期选择器，但很明显，它弄乱了我的网站的其余部分（我目前的字体大小为.9em）。

我尝试在文本框周围放置DIV并设置其字体大小，但似乎忽略了这一点。因此，必须有某种方法可以通过更改其父级字体来缩小datepicker，但是如何做到这一点而又不弄乱我的网站的其余部分呢？

jquery-ui 
— gfrizzle
source
粘贴您的代码，因为我不知道为什么它会更大？您是指图像按钮还是显示日期的实际日历？
— TStamper
我注意到，datepicker HTML将插入任何包含div的外部。这就是为什么没有设置div的字体大小的原因（除了样式声明需要更具体的事实，例如Jimmy Stenke的回答）。
— evanrmurphy 2013年

Answers:

390

您不必在jquery-ui css文件中进行更改（如果更改默认文件，可能会造成混淆），如果添加，就足够了

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

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

如果在声明中的ui-datepicker之后提到ui-widget，则需要div.ui-datepicker

— 吉米·斯坦克（Jimmy Stenke）
source
26
“在ui文件之后加载的样式表中”步骤非常重要。如果您在jquery ui样式表之前加载样式表，则您设置的所有属性都会被覆盖。
— 特拉维斯
7
要按照注释1停止覆盖问题，您可以执行以下操作：font-size：10px！important;
— 马丁
7
！important有点黑，我绝对建议不要使用它。
— Derek Adair
5
这就是为什么它们被称为级联样式表（CSS）
— 马克·w ^
1
大声笑甚至没有注意到问题可能是字体大小！谢谢你
— themhz 2013年
30

我无法添加评论，因此是参考Keijro接受的答案。实际上，我在样式表中添加了以下内容：

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

而且效果很好。这可能比10px的绝对值更好。

— 布莱恩特·鲍曼
source
20

不知道是否有人建议采用以下方法，如果可以，请忽略我的评论。我今天对此进行了测试，它对我有用。通过仅在显示控件之前调整字体大小：

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

使用回调函数beforeShow

— 崔
source
2
我更喜欢此解决方案
— Code Monkey
9

我在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; }
— 帕维尔·楚楚瓦（Pavel Chuchuva）
source
5

加

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

在ui文件之后加载的样式表中。这还将调整日期项目的大小。

— 萨蒂亚兰BV
source
5

对我来说，这是最简单的解决方案：我在jQuery自定义css文件font-size:62.5%;的第一个.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%; }
— 罗伯特·K
source
4

我正在尝试这些示例，但没有成功。显然页面上的其他样式表正在为不同标签设置默认字体大小。如果调整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>

祝好运！

— 乍得·库恩
source
2

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

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

它像一种魅力。

— 克里斯
source
1

这对我有用，看起来很简单...

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

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
— 吉姆斯卡夫
source
1 
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>
— 巴布
source
1

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

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
— 佩德罗·肯德基
source
1

更改日历大小的最佳位置是在文件jquery-ui.css中

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}
— 约翰·贝拉卡扎（John Belalcazar）
source
1

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

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>
— 伊尔沙德·汗（Irshad Khan）
source
1

您可以按以下方式更改jquery-ui-1.10.4.custom.css

.ui-widget
{
    font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-size: 0.6em;
}
— 安树
source
1

另一种方法：

$('.your-container').datepicker({
    beforeShow: function(input, datepickerInstance) {
        datepickerInstance.dpDiv.css('font-size', '11px');
    }
});
— 核仁
source
1

$('div.ui-datepicker').css({ fontSize: '12px' }); 工作，如果我们以后叫它 $("#DueDate").datepicker();

小提琴

— 莫斯塔法
source
1

我们可以按照以下给定代码更改默认的“ 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>

希望这可以帮助...

— 用户名
source
0

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

— gfrizzle
source
0

打开ui.all.css

最后放

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

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

去 ！

0

为了使它在带有Rails 3.1的Safari 5.1中工作，我必须添加：

.ui-datepicker, .ui-datepicker a{
 font-size:10px;
}
— 粘土
source
0

我有一个日期选择器出现在模式中，并且由于左侧的“ date-display-container”，日历部分看不见，所以我添加了： 

.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;
}
— 苹果电脑
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.