Bootstrap Datepicker funktioniert nicht in Chrom

Question

Ich benutze ein Jquery-Plugin Bootstrap Datepicker. Es funktioniert gut in Firefox. Es funktioniert auch auf einigen Seiten meiner Website in Google Chrome (Version 33.0.1750.117 m). Es gibt jedoch eine Texteingabe (Name = "TravelDate"), wo dieses Plugin nicht funktioniert. Diese Texteingabe wird im modalen Bootstrap-Fenster platziert.

<script> 
$(function() { 
    $("#date-trip").datepicker({ 
     format: "dd.mm.yyyy", 
     startDate: new Date(), 
     todayBtn: "linked", 
     language: "ru", 
     autoclose: true 
    }); 
}); 
</script> 

<!-- Modal --> 
<div class="modal fade" id="createTripModal" tabindex="-1" role="dialog" aria-labelledby="createTripModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Travel creating</h4> 
      </div> 

      @using (Html.BeginForm("Create", "Trip", new {ReturnUrl = ViewBag.ReturnUrl}, FormMethod.Post, new {@class = "form-horizontal", role = "form"})) 
      { 
       @Html.AntiForgeryToken() 

       @Html.ValidationSummary(true) 
       <div class="modal-body"> 
        <label for="date-trip">Date:</label> 
        <input name="TravelDate" type="text" id="date-trip" class="form-control" required autofocus /> 
       </div> 
       <div class="modal-footer"> 
        <input type="submit" value="Create" class="btn btn-primary" /> 
       </div> 
      } 
     </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

Es gibt keine Fehler in der Konsole in Google Chrome. Es ist wichtig, dass dieses Plugin auf anderen Formularen korrekt funktioniert.

Ich freue mich auf jeden Hinweis.

Answer 1

Ich behebe einen Fehler. This post hat mir geholfen. Ich änderte diese Zeile in einem Code-Plugin (10 -> 1151):

var zIndex = parseInt(this.element.parents().filter(function() { 
          return $(this).css('z-index') != 'auto'; 
         }).first().css('z-index'))+1151; 

Answer 2

Bitte verwenden Sie diesen CSS in Ihrem Code picker in Chrome zu zeigen:

<style>.datepicker{z-index:1200 !important;}</style> 

Answer 3

Watch out <input type="date"....> mit - Neuere Versionen von Chrome haben eine eigene Datumsauswahl für das Feld html5-input type "date", das den Bootstrap 3-Datumsauswahlpunkt beeinflusst. Verwenden Sie stattdessen <input type="text"....>.