web-dev-qa-db-fra.com

Le sélecteur de date bootstrap en modal ne fonctionne pas

J'ai essayé de google et de chercher SO pour une question similaire, mais je n'ai encore rien trouvé .. .. J'ai un problème où je crée et ouvre un modal à partir de jQuery et tente d'accéder à une date. sélecteur, mais il n’active pas les datepickers JS.

$("[id=add]").click(function () {
    $("#myModal .modal-header h4").html("Request for Change");
    $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
    $("#myModal").modal("show");
});

(Toutes mes excuses pour la longueur de la ligne, mais j’ai enlevé le plus possible, en montrant simplement le code qui concerne le problème.)

J'ai ces scripts référencés en haut:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>

Et dans la même balise <script> </script> que la fonction jquery ci-dessus, tout en haut, j'ai:

$('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
});

J'ai ce code utilisé d'une manière similaire (sauf no modal jquery - simplement sur une page cshtml) qui fonctionne correctement. Je ne sais pas pourquoi cette façon ne fonctionnera pas. J'ai utilisé des outils de développement pour tenter de détecter un problème, mais il n'y a pas d'erreur. Les scripts se chargent correctement. Toutefois, lorsque vous cliquez sur Date requise, il ne se lance pas dans jQuery pour datepicker.

Est-ce que j'utilise mal le code HTML Jquery pour créer le modal? 

À votre santé

javascriptjqueryhtmldatepicker
8
Craig

Le sélecteur de date se cache derrière le modal.

Définissez le z-index du datepicker au-dessus du modal, qui est 1050.

En outre, encapsulez votre code datepicker dans l'événement d'affichage modal de bootstrap.

$('#myModal').on('shown.bs.modal', function() {
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    container: '#myModal modal-body'
  });
});

$("[id=add]").click(function() {
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></form>');
  $("#myModal").modal("show");
});
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<style>
    .datepicker {
      z-index: 1600 !important; /* has to be larger than 1050 */
    }
</style>

<div class="well">
  <button type="button" id="add">Add</button>
</div>
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4></h4>
      </div>
      <div class="modal-body">
      </div>
    </div>
  </div>
</div>

Remarque: j'ai ajouté la version CSS bootstrap v3.3.6 et supprimé la référence locale au script tablesorter pour la démonstration.

11
luchaos

eh bien, vous devez appeler le datepicker après le chargement du modal:

$("[id=add]").click(function() {

  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
  $("#myModal").modal("show");

  $('#myModal').on('shown.bs.modal', function(e) {
    $('.input-group.date').datepicker({
      format: "dd/mm/yyyy",
      startDate: "01-01-2015",
      endDate: "01-01-2020",
      todayBtn: "linked",
      autoclose: true,
      todayHighlight: true
    });
  });

});
3
Supun Praneeth

Vous devez lancer le sélecteur de date sur l’événement Modal affiché

1
mzografski
$(document).on('click','#add',function(){
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true
  });
})
0
Haz Pro
$('#myModal').on('shown.bs.modal', function (e) {
     $('.date').datepicker();
});
0
Chinthaka

Ça marche pour moi!

$('#modal_form_horizontal').on('shown.bs.modal', function() {
    $('.daterangepicker').css('z-index','1600');
});
0
Евгений К

Par défaut, l'indice z modal est 2050. Votre index z datepicker doit être supérieur à l'indice z modal.

Comme:

.datepicker {
    z-index: 2051 !important;
}
0
Altaf

Cela est dû à l'index z, Vous pouvez maintenant définir manuellement l'index z du sélecteur de date dans votre styles.css

/*Date picker container*/ bs-datepicker-container { z-index: 3000; }
0
Mohit Sharma