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

Question

I want to be able to control the font size of multiple jquery-ui datepicker independantly. I have 2 datepicker linked to a text input. Declared like this:
$('#Date1').datepicker({firstDay: 1,showWeek: true});
$('#Date2').datepicker({firstDay: 1,showWeek: true});

In the HTML, they are used like this:
<input type="text" size=10 maxlength=10 id="Date1">
<input type="text" size=10 maxlength=10 id="Date2">

How do I change the font size of the datepicker independently?
<style type="text/css"> .ui-datepicker { font-size: 12px; } </style>
affects both datepicker.
<style type="text/css"> #Date1 { font-size: 12px; } </style> <style type="text/css"> #Date1 { font-size: 12px; } </style> does nothing.
If I create a <div> arount the <input> it also affects the text input, which I do not want.

Thanks.

Answer 1

尝试

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

Answer 2

you can't change the font size independently, it uses the SAME element for both datepickers, here's my JSfiddle, if you inspect element on the input fields you will see what I mean.

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

Answer 3

If you a div you can target just the datepicker not the input, like so

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

Answer 4

Since the datepicker uses the same one datepicker regardless of how many instances you create, the best thing to do would be to add and remove classes dependant on the instance.

See this 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');
    }
});​