web-dev-qa-db-fra.com

jQuery ui datepicker conflit avec bootstrap datepicker

Je veux montrer deux mois en utilisant bootstrap datepicker. Après une recherche sur google, je ne parviens pas à trouver comment afficher plusieurs mois à l’aide de bootstrap datepicker. J'ai découvert que je pouvais utiliser l'interface utilisateur de JQuery pour afficher plusieurs mois. 

Mais le problème est le suivant: dans mon application, ils utilisent le sélecteur de date bootstrap. Lorsque j'essaie d'utiliser le sélecteur de date JQuery UI, Bootstrap datepicker le remplace et je ne parviens pas à voir le sélecteur de date JQuery UI.

Pourriez-vous s'il vous plaît suggérer comment remplacer bootprap datepicker par l'interface utilisateur de JQuery?

Je voulais réaliser ceci: http://jqueryui.com/datepicker/#multiple-calendars

jquerytwitter-bootstrapjquery-uijquery-ui-datepickerbootstrap-datepicker
11
ersat.ice37

Ce problème peut être résolu en utilisant la méthode noConflict de bootstrap-datepicker

$.fn.datepicker.noConflict = function(){
   $.fn.datepicker = old;
   return this;
};

Vous pouvez simplement faire $.fn.datepicker.noConflict() qui remplace le sélecteur de date d'amorçage par l'ancien sélecteur de date qui était présent, dans ce cas, l'interface utilisateur jQuery.

Pour ceux qui veulent garder les deux datepickers, vous pouvez faire quelque chose comme suit:

if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
   var datepicker = $.fn.datepicker.noConflict();
   $.fn.bootstrapDP = datepicker;
}

après quoi vous pourrez initialiser datepicker de l'interface utilisateur jQuery à l'aide de la méthode datepicker() et amorcer un processus à l'aide de bootstrapDP()

Note latérale: Assurez-vous de bien charger bootstrap datepicker après jquery ui pour pouvoir utiliser la fonction noConflict().

$(function() {
  if (!$.fn.bootstrapDP && $.fn.datepicker && $.fn.datepicker.noConflict) {
    var datepicker = $.fn.datepicker.noConflict();
    $.fn.bootstrapDP = datepicker;
  }
  $("#jquery-ui-datepicker").datepicker({});
  $('#bootstrap-datepicker').bootstrapDP({});
});
#left {
  width: 50%;
  float: left;
}
#bootstrap-datepicker {
  width: 50%;
  float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>

<div id="left">
  <p>Date:
    <input type="text" id="jquery-ui-datepicker">
  </p>
</div>
<div id="bootstrap-datepicker" class="input-group date">
  <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

20
T J

J'ai constaté que l'indice z pour la fenêtre contextuelle jQueryUI était faible.

essaye ça 

#ui-datepicker-div{
z-index:350 !important;
}
1
jabu.hlong

Vous pouvez utiliser bootstrap et jQuery-UI avec pratiquement aucun problème si vous utilisez datepicker. 

Au moins, je n’avais aucun problème, mais jQuery-UI fonctionnait puis j’appliquais bootstrap. Je recommande cette approche. 

Voici l'implémentation jQuery-UI de datepicker avec plusieurs mois.

      $(function() {
          $( "#datepicker" ).datepicker({
          numberOfMonths: 3,
          showButtonPanel: true
          });
       });

Maintenant, voici ma mise en œuvre de jQueryUI:

Elément HTML:

            <input type="text" class="datepicker" value="date.format("yyyy-MM-dd")" name="date[@i]" />

JS:

    $(function() {
        $(".datepicker").datepicker({
            dateFormat: 'yy-mm-dd',
            numberOfMonths:2
        });
    });

Comme vous pouvez le voir, j'utilise class au lieu de ID car, sur certaines pages, j'utilise plusieurs sélecteurs de dates. 

0
marcus

vous pouvez télécharger un script jquery-ui personnalisé sans inclure le module datepicker et modifier le nom du script de jquery-ui.min.js à jqueryuinodatepicker.min.js

0
Michael Marin

Pour approfondir les propos de la victime, l'interface utilisateur de jQuery peut être utilisée avec Bootstrap mais cela ne vaut peut-être pas la peine. Voir ce message de SO:

Puis-je utiliser Twitter Bootstrap et jQuery UI en même temps?

Vous constaterez peut-être que ce sélecteur de date a plus d'options qui pourraient vous donner ce dont vous avez besoin ... Je ne vois cependant pas plusieurs calendriers: http://eternicode.github.io/bootstrap-datepicker/

Je considérerais également que l'apparence de l'interface utilisateur de jQuery peut sembler hors de propos avec l'aspect et la convivialité du bootstrap, bien que ce ne soit que mon opinion. 

0
Matthew Doyle