2012-08-16 96 views
1

我希望能夠獨立控制多個jquery-ui datepicker的字體大小。 我有2個日期選擇器鏈接到文本輸入。聲明如下:
$('#Date1').datepicker({firstDay: 1,showWeek: true});
$('#Date2').datepicker({firstDay: 1,showWeek: true});

jquery-ui不同字體大小的多個日期選擇器

在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>
同時影響日期選擇器。
<style type="text/css"> #Date1 { font-size: 12px; } </style>什麼都不做。
如果我創建了一個<div>,那麼它也會影響我不想要的文本輸入。

謝謝。

+0

加**!**重要與字體大小#日期1 CSS – 2012-08-16 17:00:02

回答

0

由於日期選擇器使用的是同一日期選擇器,無論創建了多少的情況下,最好的要做的事情是添加和刪除依賴於實例的類。

看到這個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'); 
    } 
});​ 
+1

這工作得很好,謝謝! – 2012-08-16 17:40:11

0

嘗試

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

您不能獨立更改字體大小,它使用兩個datepickers的SAME元素,這是我的jsfiddle,如果你在輸入字段檢查元素,你會看到我意思。

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

0

如果一個div可以只指定的日期選擇不輸入,像這樣

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