Question

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

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

body {font-size: 62.5%;}

使1em = 10px。这样做给了我一个很好的大小的日期选择器，但显然它弄乱了我的网站的其余部分（我目前有字体大小：.9em）。

我尝试在文本框周围投掷DIV并设置其字体大小，但似乎忽略了这一点。所以必须有一些方法可以通过更改其父级的字体来缩小日期选择器，但是如何在不弄乱我的其他网站的情况下这样做呢？

Answer 1

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

就足够了

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

在ui-files

之后加载的样式表中的

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

div.ui-datepicker

Answer 2

我无法添加评论，所以这是参考Keijro接受的答案。我实际上将以下内容添加到我的样式表中：

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

它也有效。这可能优于10px的绝对值。

Answer 3

不确定某个团体是否建议采用以下方式，如果是，请忽略我的评论。我今天测试了它，它对我有用。只需在控件显示之前调整字体大小：

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

在显示之前使用回调函数

Answer 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; }

Answer 5

添加

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

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

Answer 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%; }

Answer 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 th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>

祝你好运！

Answer 8

我使用输入来收集和显示日历，并且能够调整我使用此代码的日历大小：

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

它就像一个魅力。

Answer 9

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

Answer 10

我们可以在默认的 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>

希望这对您有帮助...

Answer 11

Jacob Tsui解决方案对我来说非常适合：

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

Answer 12

如果我们之后再打电话，那么

$('div.ui-datepicker').css({ fontSize: '12px' });就可以了 $("#DueDate").datepicker();

Fiddle

Answer 13

另一种方法：

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

Answer 14

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

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

Answer 15

此代码适用于日历按钮。使用“line-height”会增加数字的大小。

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>

Answer 16

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

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

Answer 17

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

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

Answer 18

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>

Answer 19

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

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

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

Answer 20

为了在Safari 5.1中使用Rails 3.1工作，我不得不添加：

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

Answer 21

打开ui.all.css

最后放

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

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

然后去！

Answer 22

我有一个日期选择器出现在模式中，并且由于左侧的“ 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;
}

Answer 23

我想我发现了 - 我必须进入CSS文件并直接更改datepicker控件的字体大小。一旦你了解它就很明显，但最初会让人感到困惑。

如何调整jQuery DatePicker控件的大小

23 个答案: