Comment faire fonctionner bootstrap-datepicker avec Bootstrap ?

Pour adapter une version ancienne du plugin d'Eternicode, ou bien celui développé par Stefan Petre, avec la version 3 de Bootstrap, il est nécessaire d'effectuer des modifications dans le code.

Le plugin Bootstrap-datepicker permet d'ajouter un calendrier permettant de sélectionner une date lorsque l'on clique sur un champ de saisie. Ce plugin existe en deux versions : l'une d'elles est développée par Eternicode, qui est un fork de l'originale développée par Stefan Petre. La version d'Eternicode est maintenant compatible directement avec la version 3 de Bootstrap, mais ça n'a pas été toujours le cas. Pour adapter une version plus ancienne du plugin d'Eternicode, ou bien celui développé par Stefan Petre, avec la version 3 de Bootstrap, il est nécessaire d'effectuer des modifications dans le code.

Le premier changement à effectuer pour assurer la compatibilité du plugin avec Bootstrap 3 est dans le HTML montré en exemple sur le site, qui est à modifier. Voici la nouvelle façon d'implémenter un champ datepicker :

<div class="form-group row">
 <div class="col-xs-8">
 <label class="control-label">Mon Label</label>
 <div class="input-group date" id="dp3" data-date="01-01-2000" data-date-format="mm-dd-yyyy">
 <input class="form-control" type="text" readonly="" value="01-01-2000">
 <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
 </div>
 </div>
</div>

Il y a ensuite une modification à faire dans le fichier datepicker.css. Il faut modifier les lignes 446-447 pour que le code ressemble à ceci :

.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {

Sur certaines versions plus anciennes du plugin, la ligne à modifier est située aux lignes 176-177. Le dernier fichier à modifier est le fichier datepicker-bootstrap.js. Il faut modifier la ligne 46 (cela peut être la ligne 44 ou bien la ligne 34 selon les versions) :

this.component = this.element.is('.date') ? this.element.find('.input-group-addon, .btn') : false;

Une fois ces modifications effectuées, le plugin devient compatible avec le framework Bootstrap 3. Vous pouvez instancier le sélecteur de date avec la directive suivante (vous pouvez ajouter des options entre accolades en vous référant à la documentation) :

$(".input-group.date").datepicker();