web-dev-qa-db-fra.com

Comment redimensionner le Bootstrap DatePicker?

Mon code est comme ça:

HTML:

<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy">
    <input class="input-medium" size="16" type="text"><span class="add-on"><i class="icon-th"></i></span>
</div>

Javascript:

$(document).ready(function() {
    $('.datepicker').datepicker({
        autoclose: true,
        startDate: new Date()
    });
});

Démo: jsfiddle

Je veux changer la taille du bootstrap datepicker

Toute suggestion pour résoudre mon problème

Je vous remercie

jquerycsstwitter-bootstrapdatepicker
5
moses toh

Vous pouvez contrôler la largeur à l'aide des sélecteurs .datepicker et .table-condensed:

$(document).ready(function() {
  $('.datepicker').datepicker({
    autoclose: true,
    startDate: new Date()
  });
});
.datepicker,
.table-condensed {
  width: 500px;
  height:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<div class="input-append date datepicker no-padding" data-date-format="dd-mm-yyyy">
  <input class="input-medium" size="16" type="text"><span class="add-on"><i class="icon-th"></i></span>
</div>

Vous devez appliquer les deux car .table-condensed a max-width:100%. si vous vous en débarrassez, vous pouvez contrôler la taille en utilisant .datepicker

6
T J

Voici le sortilège qui a bien fonctionné pour moi. Et cela se passe bien dans la plupart des navigateurs.

.datepicker,
.table-condensed {
    width: 220px;
    height: 220px;
    font-size: x-small; 
}

Fondamentalement, il affiche une taille réduite du sélecteur de date d'amorçage. 

3
Roberto

Dans mon cas, je voulais juste donner à la date la même hauteur que les autres entrées. Cette ligne l'a résolu:

$('input[type="date"]').height($('input').height());
0
siderio2