如何调整jQuery DatePicker控件的大小

Question

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

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

body {font-size: 62.5%;}

使1em = 10px.这样做给了我一个很好的大小的日期选择器,但显然它弄乱了我的网站的其余部分(我目前有font-size:.9em).

我试着在我的文本框周围抛出一个DIV并设置它的字体大小,但似乎忽略了这一点.因此必须有一些方法可以通过更改其父级的字体来缩小日期选择器,但是如何在不弄乱其余网站的情况下执行此操作？

Answer 1

您不必在jquery-ui css文件中更改它(如果更改默认文件可能会令人困惑),如果添加它就足够了

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

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

如果在声明中的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) 
    }
});

在beforeShow之前使用回调函数

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

对我来说,这是最简单的解决方案:我在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%; }