web-dev-qa-db-fra.com

Comment faire fonctionner bootstrap-datepicker avec Bootstrap 3?

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

Sur Bootstrap 2, cela a fonctionné, mais maintenant, il ne fonctionne pas avec la bibliothèque Bootstrap 3.

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

Remarque: Le référentiel a été déplacé de eternicode vers un compte d'organisation (uxsolutions).

twitter-bootstraptwitter-bootstrap-3datepickerbootstrap-datepicker
59
user2167526

J'utilise aussi http://www.eyecon.ro/bootstrap-datepicker de Stefan Petre 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 présentation de grille de formulaire dans Bootstrap 3. De plus, vous devez 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 aux lignes 176-177:

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

Modification 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 le plus récent de http://eternicode.github.io/bootstrap-datepicker/ , les modifications sont les suivantes:

Changements CSS dans datepicker.css aux lignes 446 à 447:

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

Modification 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 fourchette est préférable à l’utilisation que l’autre, car elle est plus riche en fonctionnalités, prend en charge la localisation et positionne automatiquement le sélecteur de date en fonction de la position de contrôle et de la taille de la fenêtre, ce qui évite que le sélecteur ne disparaisse de l’écran, ce qui posait problème avec l’ancien. version.

84
Shane

Pour quiconque se heurte à cela ...

La version 1.2.0 de ce plugin (actuelle à ce jour) ne fonctionne pas dans tous les cas, comme documenté avec Bootstrap 3.0, mais avec une solution de contournement mineure.

Plus précisément, si vous utilisez une entrée avec une 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 donc que vous deviez utiliser un sélecteur qui pointe directement sur l'élément d'entrée lui-même NOT le conteneur parent (ce que suggère le code 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
});

Ceci fait, vous voudrez probablement aussi ajouter un écouteur pour cliquer/taper sur l’icône afin qu’elle active la saisie de texte lorsque vous cliquez dessus (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: je viens d'utiliser un attribut 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.

22
Iain Collins