198 Stimmen

gfrizzle avatar

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

Gefragt el 18 de Marsch, 2009
Wann wurde die Frage gestellt
210916 Ansichten
Anzahl der Besuche der Frage
5 Antworten
Anzahl der Fragenantworten
Gelöst
Aktueller Status der Frage

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?

Gefragt el 18 de Marsch, 2009 von gfrizzle

Antworten

Zu viele Anzeigen?

1voto

John Belalcazar avatar
John Belalcazar Punkte 41

Die Größe des Kalenders lässt sich am besten in der Datei jquery-ui.css ändern

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}
Beantwortet el 24 de Februar, 2014 von John Belalcazar (41 Punkte )

1voto

PedroKTFC avatar
PedroKTFC Punkte 735

Ich habe versucht, die Callback-Funktion beforeShow zu verwenden, musste aber feststellen, dass ich auch die Zeilenhöhe einstellen musste. Meine Version sah so aus:

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
Beantwortet el 4 de Juli, 2013 von PedroKTFC (735 Punkte )

1voto

babbu avatar
babbu Punkte 11 
with out changing the css file you can also change the calendar size  by putting the the following code in to ur <head>.....</head> tag:

<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://stackoverflow.com/resources/demos/style.css" />
<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em; }
</style>

<script>

$(function() {

$( "#datepicker" ).datepicker({
//font-size:10px;
 //numberOfMonths: 3,

showButtonPanel: true,
showOn: 'button',
buttonImage: "images/calendar1.gif",
buttonImageOnly: true
});
});
</script>

</head>
Beantwortet el 17 de Marsch, 2013 von babbu (11 Punkte )

1voto

jimscafe avatar
jimscafe Punkte 1031

Das hat bei mir funktioniert und scheint einfach zu sein...

$(function() {
  $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
Beantwortet el 15 de Kann, 2012 von jimscafe (1031 Punkte )

0voto

Clay avatar
Clay Punkte 2899

Um dies in Safari 5.1 mit Rails 3.1 zum Laufen zu bringen, musste ich hinzufügen:

.ui-datepicker, .ui-datepicker a{
 font-size:10px;
}
Beantwortet el 25 de August, 2011 von Clay (2899 Punkte )

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

Yandex
X