Bootstrap Datepicker not working in chrome

Question

I use a Jquery plugin Bootstrap Datepicker. It works fine in firefox. Also, 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 on 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 Console in Google Chrome. It is important that this plugin works correctly on other forms.

I'll be glad to any advice.

Answer 1

I fix a bug. This post helped to me. I changed this line in a code of plugin (+10 -> +1151):

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

Answer 2

Watch out using <input type="date"....> - recent versions of Chrome have its own date-picker for the html5-input type field "date", interfering with the Bootstrap 3 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>