J'utilise Bootstrap datepicker en utilisant l'API Bootstrap-datepicker. Lorsque je clique sur le bouton, la fenêtre contextuelle calendar/datepicker apparaît, mais elle ne marque pas la date du jour comme police bleue, comme indiqué dans les exemples d'API.
J'utilise le code ci-dessous:
<body>
<div class="input-group date col-md-5" id="datepicker" data-date-format="dd-mm-yyyy">
<input class="form-control" size="56" type="text" value="" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
$('#datepicker').datepicker();
</script>
</body>
La fenêtre contextuelle calendar/datepicker est affichée, mais la date actuelle n'est pas mise en surbrillance en bleu, comme indiqué dans les exemples d'API, et le curseur de la souris n'est pas un pointeur.
S'il vous plaît aidez-moi à ce sujet
Si vous utilisez ceci: https://github.com/eternicode/bootstrap-datepicker vous devez donner des options lorsque vous lancez un calendrier, telles que
$('#sandbox-container input').datepicker({
todayHighlight: true
});
$('#datepicker').datepicker({
format: 'dd-mm-yyyy',
todayHighlight: true
});
Voici le JSFiddle
Bootstrap Datepicker dépend de son propre CSS pour le style du widget de calendrier.
Pour importer rapidement la dépendance, vous pouvez choisir une version dans cdnjs (assurez-vous de bien choisir une extension .css) et importer dans votre code HTML comme suit:
<head>
<meta charset="UTF-8">
<!-- ... -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.css" />
</head>
Juste pour ajouter à la liste des solutions possibles car je rencontrais le même problème. La classe today
n'était pas affectée au jour actuel à l'aide de:
$('.datepicker').datepicker({
'format': 'mm/dd/yyyy',
'todayHighlight': true
});
Le code HTML de cet exemple a uniquement une classe de date
.
<div class="input-group date">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
Dans mon cas, la classe datepicker
me manquait. Ajoutons cela à l'élément et maintenant tout fonctionne correctement.
Doit être:
<div class="input-group date datepicker">
<input type="text" class="form-control" value="12-02-2012">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
Une autre option consiste à ajouter cet attribut à votre élément d'entrée datepicker
:
today-highlight="true"