Comment faire pour que bootstrap-datepicker fonctionne avec Bootstrap 3 ?

Question

J'utilise la version de bootstrap-datepicker maintenu par eternicode (Andrew Rowls).

Sur Bootstrap 2, cela fonctionnait, mais maintenant cela ne fonctionne pas avec la bibliothèque Bootstrap 3.

Comment puis-je obtenir bootstrap-datepicker pour travailler avec Bootstrap 3 ?

Note : Le dépôt a été déplacé de eternicode à un compte d'organisation (uxsolutions).

Answer 1

J'utilise également la méthode de Stefan Petre http://www.eyecon.ro/bootstrap-datepicker et il ne fonctionne pas avec Bootstrap 3 sans modification. Notez que http://eternicode.github.io/bootstrap-datepicker/ est un fork du code de Stefan Petre.

Vous devez modifier votre balisage (l'exemple de balisage ne fonctionnera pas) pour utiliser le nouveau CSS et la nouvelle grille de formulaire de Bootstrap 3. Vous devez également modifier certains CSS et JavaScript dans l'implémentation actuelle de bootstrap-datepicker.

Voici ma solution :

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

Changements CSS dans datepicker.css sur les lignes 176-177 :

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

Modification du javascript dans datepicker-bootstrap.js à la ligne 34 :

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

UPDATE

En utilisant le code plus récent de http://eternicode.github.io/bootstrap-datepicker/ les changements sont les suivants :

Changements CSS dans datepicker.css sur les lignes 446-447 :

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

Modification du javascript dans datepicker-bootstrap.js à la ligne 46 :

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

Enfin, le JavaScript pour activer le sélecteur de date (avec quelques options) :

 $(".input-group.date").datepicker({ autoclose: true, todayHighlight: true });

Testé avec Bootstrap 3.0 et JQuery 1.9.1. Notez que cette version est meilleure que l'autre car elle est plus riche en fonctionnalités, supporte la localisation et positionne automatiquement le sélecteur de date en fonction de la position du contrôle et de la taille de la fenêtre, évitant ainsi que le sélecteur ne sorte de l'écran, ce qui était un problème avec l'ancienne version.

Answer 2

Pour tous ceux qui rencontrent ce problème...

La version 1.2.0 de ce plugin (actuelle au moment de la publication de cet article) ne fonctionne pas dans tous les cas comme indiqué dans la documentation sur Bootstrap 3.0, mais elle le fait avec une solution de contournement mineure.

Plus précisément, si vous utilisez une entrée avec icône, le balisage HTML est bien sûr légèrement différent car les noms de classe ont changé :

<div class="input-group" data-datepicker="true">
    <input name="date" type="text" class="form-control" />
    <span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>

Il semble que pour cette raison, vous devez utiliser un sélecteur qui pointe directement sur l'élément d'entrée lui-même. PAS le conteneur parent (c'est ce que suggère le HTML généré automatiquement sur la page de démonstration).

$('*[data-datepicker="true"] input[type="text"]').datepicker({
    todayBtn: true,
    orientation: "top left",
    autoclose: true,
    todayHighlight: true
});

Après avoir fait cela, vous voudrez probablement aussi ajouter un écouteur pour cliquer/taper sur l'icône afin qu'il mette le focus sur l'entrée de texte lorsqu'il est cliqué (ce qui est le comportement lorsqu'on utilise ce plugin avec TB 2.x par défaut).

$(document).on('touch click', '*[data-datepicker="true"] .input-group-addon', function(e){
    $('input[type="text"]', $(this).parent()).focus();
});

NB : J'utilise simplement un attribut booléen data-datepicker car le nom de classe 'datepicker' est réservé par le plugin et j'utilise déjà 'date' pour les éléments de style.