Wie man die Größe des jQuery DatePicker-Steuerelements ändert

Question

Ich bin mit dem jQuery DatePicker-Steuerelement zum ersten Mal. Ich habe es funktioniert auf meinem Formular, aber es ist etwa doppelt so groß wie ich möchte, und etwa 1,5 mal so groß wie die Demo auf der jQuery UI-Seite. Gibt es einige einfache Einstellung, die ich vermisse, um die Größe zu steuern?

編集する。 Ich habe einen Hinweis gefunden, aber das wirft neue Probleme auf. In der CSS-Datei heißt es, dass die Komponente entsprechend der Schriftgröße des übergeordneten Elements skaliert wird. Sie empfehlen die Einstellung

body {font-size: 62.5%;}

um 1em = 10px zu machen. Dies zu tun gibt mir eine schön große datepicker, aber natürlich es verwirrt den Rest meiner Website (ich habe derzeit font-size: .9em).

Ich habe versucht, ein DIV um mein Textfeld zu legen und die Schriftgröße einzustellen, aber es scheint das zu ignorieren. Also muss es eine Möglichkeit geben, die datepicker zu schrumpfen, indem Sie die Schriftart der übergeordneten, aber wie kann ich das tun, ohne den Rest meiner Website durcheinander?

Answer 1

Die Lösung von Jacob Tsui ist für mich perfekt:

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

Answer 2

$('div.ui-datepicker').css({ fontSize: '12px' }); funktionieren, wenn wir sie nach $("#DueDate").datepicker();

Fiddle

Answer 3

Ein anderer Ansatz:

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

Answer 4

Können Sie jquery-ui-1.10.4.custom.css wie folgt ändern

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

Answer 5

Dieser Code funktioniert bei Kalenderschaltflächen. Die Größe der Zahlen wird durch die Verwendung von "line-height" erhöht.

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