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

Sie müssen es nicht in der jquery-ui css-Datei ändern (es kann verwirrend sein, wenn Sie die Standarddateien ändern), es reicht, wenn Sie hinzufügen

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

in einem Stylesheet, das nach den ui-Dateien geladen wird

div.ui-datepicker wird benötigt, wenn ui-widget in der Deklaration nach ui-datepicker genannt wird

Answer 2

Ich kann keinen Kommentar hinzufügen, also beziehe ich mich auf die akzeptierte Antwort von Keijro. Ich habe stattdessen das Folgende zu meinem Stylesheet hinzugefügt:

    div.ui-datepicker {
    font-size: 62.5%;
}

und es hat auch funktioniert. Dies könnte besser sein als der absolute Wert von 10px.

Answer 3

Ich bin mir nicht sicher, ob jemand folgenden Weg vorgeschlagen hat, falls ja, ignorieren Sie einfach meine Kommentare. Ich habe dies heute getestet und es funktioniert bei mir. Indem man einfach die Größe der Schriftart ändert, bevor das Steuerelement angezeigt wird:

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

Verwendung der Rückruffunktion beforeShow

Answer 4

Ich ändere die folgende Zeile in ui.theme.css:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

zu:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }

Answer 5

Hinzufügen

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

in einem Stylesheet, das nach den UIDateien geladen wird. Dadurch wird auch die Größe der Datumselemente geändert.