web-dev-qa-db-fra.com

Le pop-up Bootprap datepicker n’a pas montré la date actuelle en surbrillance

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

javascriptjquerycsstwitter-bootstrapdatepicker
11
Adeel Asghar

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
   });
16
Gokhan
$('#datepicker').datepicker({
    format: 'dd-mm-yyyy',
    todayHighlight: true
});

Voici le JSFiddle

3
RaviRokkam

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>
1
Matheus Santana

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

Une autre option consiste à ajouter cet attribut à votre élément d'entrée datepicker:

today-highlight="true"

0
e-shfiyut