Comment redimensionner le contrôle jQuery DatePicker

195

J'utilise le contrôle jQuery DatePicker pour la première fois. Je l'ai sur mon formulaire, mais il est environ deux fois plus gros que je le souhaiterais, et environ 1,5 fois plus gros que la démo sur la page de l'interface utilisateur jQuery. Existe-t-il un paramètre simple qui me manque pour contrôler la taille?

Edit: j'ai trouvé un indice, mais cela ouvre de nouveaux problèmes. Dans le fichier CSS, il indique que le composant sera mis à l'échelle en fonction de la taille de police de l'élément parent. Ils recommandent le réglage

body {font-size: 62.5%;}

pour faire 1em = 10px. Cela me donne un sélecteur de date de bonne taille, mais évidemment, il gâche le reste de mon site (j'ai actuellement la taille de police: .9em).

J'ai essayé de lancer un DIV autour de ma zone de texte et de définir sa taille de police, mais il semble ignorer cela. Il doit donc y avoir un moyen de réduire le sélecteur de date en changeant la police de son parent, mais comment faire sans gâcher le reste de mon site?

gfrizzle
la source
collez votre code, parce que je ne sais pas pourquoi il serait plus gros? et faites-vous référence au bouton d'image ou au calendrier réel qui affiche les jours?
TStamper
J'ai remarqué que le HTML datepicker sera inséré en dehors de tout div contenant. C'est pourquoi la définition de la taille de la police de votre div ne l'a pas fait (à part le fait que la déclaration de style devait être plus précise, comme dans la réponse de Jimmy Stenke).
evanrmurphy

Réponses:

390

Vous n'avez pas besoin de le changer dans le fichier CSS jquery-ui (cela peut être déroutant si vous changez les fichiers par défaut), cela suffit si vous ajoutez

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

dans une feuille de style chargée après les fichiers ui

div.ui-datepicker est nécessaire dans le cas où ui-widget est mentionné après ui-datepicker dans la déclaration

Jimmy Stenke
la source
26
L'étape "dans une feuille de style chargée après les fichiers ui" est très importante. Si vous chargez votre feuille de style avant la feuille de style jquery ui, tous les attributs que vous définissez seront remplacés.
Travis
7
Pour arrêter le problème écrasé selon le commentaire 1 - vous pouvez le faire: font-size: 10px! Important;
Martin
7
! L'important est le hack-ish, je déconseillerais certainement de l'utiliser.
Derek Adair, le
5
C'est pourquoi elles sont appelées feuilles de style CASCADING (CSS)
Mark W
1
lol n'a même pas remarqué que le problème pourrait être la taille de la police! merci
themhz
30

Je ne peux pas ajouter de commentaire, c'est donc en référence à la réponse acceptée par Keijro. En fait, j'ai ajouté ce qui suit à ma feuille de style:

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

et cela a aussi bien fonctionné. Cela pourrait être préférable à la valeur absolue de 10px.

Bryant Bowman
la source
20

Je ne sais pas si un organisme a suggéré la voie suivante, si oui, ignorez simplement mes commentaires. J'ai testé cela aujourd'hui et cela fonctionne pour moi. En redimensionnant simplement la police avant que le contrôle ne s'affiche:

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

Utilisation de la fonction de rappel beforeShow

Jacob CUI
la source
2
Je préfère cette solution
Code Monkey
9

Je change la ligne suivante dans ui.theme.css:

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

à:

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

Ajouter

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

dans une feuille de style chargée après les fichiers ui. Cela redimensionnera également les éléments de date.

Satyaram BV
la source
5

Pour moi, c'était la solution la plus simple: j'ai ajouté font-size:62.5%;le premier.ui-datepicker balise du fichier css personnalisé jquery:

avant:

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

après:

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

J'essayais ces exemples sans succès. Apparemment, d'autres feuilles de style sur la page définissaient des tailles de police par défaut pour différentes balises. Si vous ajustez le sélecteur ui-date, vous changez une div. Si vous modifiez un div, vous devez vous assurer que le contenu de ce div hérite de cette taille. C'est ce qui a finalement fonctionné pour moi:

<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>

Bonne chance!

Chad Kuehn
la source
2

J'utilisais une entrée pour collecter et afficher le calendrier, et pour pouvoir redimensionner le calendrier, j'utilisais ce code:

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

Il fonctionne comme un charme.

Chris
la source
2

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

Stefan Höltker
la source
1

Cela a fonctionné pour moi et semble simple ...

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

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>
jimscafe
la source
1
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="/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>
babbu
la source
1

J'ai essayé l'approche d'utiliser la fonction de rappel avant Show, mais j'ai constaté que je devais également définir la hauteur de la ligne. Ma version ressemblait à:

beforeShow: function(){$j('.ui-datepicker').css({'font-size': 11, 'line-height': 1.2})}
PedroKTFC
la source
1

le meilleur endroit pour changer la taille du calendrier est dans le fichier jquery-ui.css

/* Component containers
----------------------------------*/
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .7em; /* <--default is 1.1em */
}
John Belalcazar
la source
1

Ce code fonctionnera sur les boutons de calendrier. la taille des nombres augmentera en utilisant "line-height".

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

vous pouvez modifier jquery-ui-1.10.4.custom.css comme suit

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

Une autre approche:

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

$('div.ui-datepicker').css({ fontSize: '12px' }); travailler si nous l'appelons après $("#DueDate").datepicker();

Violon

Mostafa
la source
1

La solution Jacob Tsui fonctionne parfaitement pour moi:

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

Nous pouvons modifier dans le fichier par défaut ' jquery-ui.css ' comme ci-dessous le code donné:

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

Cependant, changer la valeur par défaut ' jquery-ui.css n'est pas recommandé de le fichier » car il pourrait avoir été utilisé ailleurs dans le projet. La modification des valeurs dans le fichier par défaut peut modifier la police de datepicker dans d'autres pages Web où elle a été utilisée.

J'ai utilisé le code ci-dessous pour modifier la "taille de police". Je l'ai placé juste après l'appel de datepicker () comme indiqué ci-dessous.

<script>
        $(function () {
            $( "#datepicker" ).datepicker();
            $("div.ui-datepicker").css("font-size", "80%")
        });
</script>

J'espère que cela t'aides...

user3401675
la source
0

Je pense que je l'ai trouvé - j'ai dû aller dans le fichier CSS et changer directement la taille de la police pour le contrôle datepicker. Évident une fois que vous le savez, mais déroutant au début.

gfrizzle
la source
0

ouvrir ui.all.css

à la fin mettre

@import "ui.base.css";
@import "ui.theme.css";

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

et aller !


la source
0

Pour que cela fonctionne dans Safari 5.1 avec Rails 3.1, j'ai dû ajouter:

.ui-datepicker, .ui-datepicker a{
 font-size:10px;
}
Argile
la source
0

J'avais un datepicker apparaissant dans un modal et à cause du "date-display-container" sur le côté gauche, le calendrier était partiellement hors de vue, alors j'ai ajouté:

.datepicker-date-display {
  display: none;
}

.datepicker-calendar-container {
  max-height: 21em;
}
.datepicker-day-button {
  line-height: 1.2em;
}

.datepicker-table > thead > tr > th {
  padding: 0;
}
Mac
la source