Question

我希望能够独立控制多个jquery-ui datepicker的字体大小。我有2个datepicker链接到文本输入。宣布如下：
$('#Date1').datepicker({firstDay: 1,showWeek: true});
$('#Date2').datepicker({firstDay: 1,showWeek: true});

在HTML中，它们的使用方式如下：
<input type="text" size=10 maxlength=10 id="Date1">
<input type="text" size=10 maxlength=10 id="Date2">

如何独立更改日期选择器的字体大小？
<style type="text/css"> .ui-datepicker { font-size: 12px; } </style>
影响两个datepicker <style type="text/css"> #Date1 { font-size: 12px; } </style>什么也没做。
如果我<div>创建了<input>，它也会影响文字输入，这是我不想要的。

感谢。

Answer 1

尝试

$('#Date1 > .ui-datepicker').css({ 'font-size': 12px});

Answer 2

你不能单独改变字体大小，它对两个日期选择器使用 SAME 元素，这是我的JSfiddle，如果你在输入字段上检查元素，你会看到我的意思。

http://jsfiddle.net/m7q3H/56/

Answer 3

如果你是一个div，你可以只针对日期选择器而不是输入，就像这样

  div#newDiv .ui-datepicker:first-child  //gets you the first one
  div#newDiv .ui-datepicker:last-child  //gets you the last one

Answer 4

由于datepicker使用相同的一个datepicker而不管您创建了多少个实例，因此最好的做法是添加和删除依赖于实例的类。

请参阅 jsFiddle example 。

<强>的jQuery

$('#Date1').datepicker({
    firstDay: 1,
    showWeek: true
});
$('#Date2').datepicker({
    firstDay: 1,
    showWeek: true,
    beforeShow: function(input, inst) {
       $('.ui-datepicker').addClass('bigFont');
    },
    onClose:function(input, inst) {
       $('.ui-datepicker').removeClass('bigFont');
    }
});

Jquery-ui具有不同字体大小的多个datepicker

4 个答案: