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

Für mich war dies die einfachste Lösung: Ich fügte die font-size:62.5%; zum ersten .ui-datepicker Tag in der benutzerdefinierten Jquery-CSS-Datei:

vor:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;} 

nach:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }

Answer 2

Ich habe diese Beispiele ohne Erfolg ausprobiert. Anscheinend haben andere Stylesheets auf der Seite Standard-Schriftgrößen für verschiedene Tags festgelegt. Wenn Sie den ui-datepicker anpassen, ändern Sie ein div. Wenn Sie ein Div ändern, müssen Sie sicherstellen, dass der Inhalt dieses Divs diese Größe erbt. Das hat bei mir schließlich funktioniert:

<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>

Viel Glück!

Answer 3

$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');

Answer 4

Ich habe eine Eingabe verwendet, um den Kalender zu erfassen und anzuzeigen, und um die Größe des Kalenders ändern zu können, habe ich diesen Code verwendet:

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

Das klappt hervorragend.

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>