Bootstrap Datepicker not working in chrome

Question

I am using the jQuery Bootstrap Datepicker plugin. It works fine in firefox. In addition, it works on some pages of my site in Google Chrome (version 33.0.1750.117 m). However, there is one text input (name = "TravelDate") where this plugin does not work. This text input is placed in the Bootstrap modal window.

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

There are no errors in the Google Chrome console. It is important that this plugin works correctly in other forms.

I will be glad to any advice.

Answer 1

Bug fixed. This post helped me. I changed this line in the plugin code (+10 → +1151):

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

Answer 2

Beware of using <input type="date"....> - the latest versions of Chrome have their own date picker for the "html5" type field of the "date" type, which prevents Bootstrap 3 from loading the datepicker. Use <input type="text"....> instead.

Answer 3

Please use this CSS in your code to show datepicker in Chrome:

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