Bootstrap Datepicker不能在chrome中工作

我使用jquery插件Bootstrap Datepicker。它在Firefox中正常工作。此外，它还可以在我的网站的某些页面上使用Google Chrome（版本33.0.1750.117米）。但是，有一个文本输入（名称=“TravelDate”），此插件不起作用。该文本输入放置在Bootstrap模式窗口中。Bootstrap Datepicker不能在chrome中工作

<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 -->

Google Chrome中的控制台没有错误。这个插件在其他表单上正确工作是很重要的。

我很乐意提供任何建议。

来源

2014-03-01 Denis

我使用的是同一个插件的1.6.0版本，并且它在Chrome中不起作用。对我而言，原因是jQuery的旧版本。所以，如果有人发现这个问题，并且下面的答案不起作用，请尝试升级jQuery。 – Nick

我修复了一个错误。 This post对我有帮助。我在插件的代码改变了这一行（+10 - > 1151）：

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

来源

2014-03-01 11:14:58 Denis

请使用CSS代码中的显示日期选择在Chrome：

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

来源

2015-07-24 10:44:22

小心使用<input type="date"....> - 最近版本的Chrome对于html5输入类型字段“date”有自己的日期选择器，干扰了Bootstrap 3日期选择器。改为使用<input type="text"....>。

来源

2015-09-15 22:30:58

Bootstrap Datepicker不能在chrome中工作

回答

相关问题