Je ne comprends pas pourquoi cela est si difficile à faire. Tout sur JQuery est si simple. Comment définissez la largeur d'une jQuery "Affichage: Inline;" DatePicker?
J'ai édité la JQuery UI CSS, mais dès que je change le mois, il réinitialise la largeur.
J'espère que ce n'est que quelque chose d'idiot qui me manque.
4 Réponses :
Si vous utilisez le datepicker jQuery sous sa forme par défaut, il suffit d'ajouter ceci à votre css et il devrait fonctionner:
.ui-datepicker {
width: 17em; /*what ever width you want*/
}
Je défais les modifications apportées à la CSS jQuery UI, il était juste pour l'expérimentation.
N'est toujours pas automatiquement modifiant par magie de manière magique des formats de police quand il est trop petit ... ( Grombolure, Grombourrbe, Grombour )
@ Kishore- ii a le même problème.here j'ai utilisé votre code mais seuls les frontières changent.Calender n'est pas modifiée
@Nithu je suis désolé qu'entendez-vous par calendrier n'est pas changé
@ Kishore-vérifier ma réponse aussi
J'ai ajouté le code après le fichier JQuery-UI CSS et cela fonctionne parfaitement.
Réduire la taille de la police du calendrier réduira la largeur du sélecteur de date.
Vous pouvez réduire la taille de la police en ajoutant ce CSS: P>
div.ui-datepicker
{
font-size:10px;
}
Oui, il le fait, c'est la solution ultime dans ce cas. Sa taille de la police héritée qui taille le widget, ce qui réduit la police réduit la taille du calendrier.
.container {
width: 270px;
}
<div class="container">
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker6'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
Je résolu ce à l'aide d'une enveloppe, et en définissant une classe CSS pour forcer le datepicker en ligne pour avoir une largeur de 100% de sa mère, alors quand vous mettez le datepicker sur .col em>, par exemple, le widget ajuster à la largeur de son parent lorsque rangée largeur changements, dans la limite bien sûr, mais est acceptable. Cela m'a été utile pour d'utiliser à l'intérieur d'une .col d'amorçage et la largeur sera sensible. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="mydpcontainer">
<div id="mydatepicker"></div>
</div>