Bootstrap Datepicker not working in chrome

问题

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.

回答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;

回答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.

回答3:

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

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

来源：https://stackoverflow.com/questions/22113178/bootstrap-datepicker-not-working-in-chrome

标签

jquery

google-chrome

bootstrap-datepicker