z-index的移动safari浏览器问题

时间:2017-09-13 06:32:33

标签: javascript jquery html css datepicker

目前在我的网站上唯一你可以看到这种情况发生在移动设备上我正在使用jquery ui datepicker并在我点击日期选择器之后如果我滚动页面向下datepicker消失并且不再打开

Click to see live

我不知道为什么会发生这种情况以及如何解决Safari的这个问题。

我分享我的js代码,但我确定这不是我的js代码,因为它非常基本,没有任何东西会影响我的datepicker

你在这里

function datePicker() {
    var dateFormat = "DD/MM/YY",
        from = $("#checkin,.checkin").datepicker({
            numberOfMonths: 2,
            firstDay: 1,
            minDate: 0,
            showButtonPanel: true,
            closeText: 'Temizle',
            onClose: function(dateText, inst) {
                $(this).attr("disabled", false);
            },
            onSelect: function(selectedDate) {
                window.setTimeout($.proxy(function() {
                    $(this).parents(".book-holiday").find("#checkout,.checkout").focus();
                }, this), 10);
                var yenitarih = new Date();
                var date = $(this).datepicker('getDate');
                var checkoutStartDate = new Date(new Date(date).setDate(date.getDate() + 1));
                var checkoutEndDate = new Date(new Date(date).setDate(date.getDate() + 500000));
                $("#checkout,.checkout").datepicker("option", "minDate", checkoutStartDate);
                $("#checkout,.checkout").datepicker("option", "maxDate", checkoutEndDate);
            },
            beforeShow: function(input, inst) {
                $(this).attr("disabled", true);
                $(this).datepicker("widget").addClass("main-datepicker");
            }
        });
    $("#checkout,.checkout").datepicker({
        numberOfMonths: 2,
        firstDay: 1,
        minDate: 0,
        showButtonPanel: true,
        closeText: 'Temizle',
        onClose: function(dateText, inst) {
            $(this).attr("disabled", false);
        },

        onSelect: function(selectedDate) {
            $(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
        },
        beforeShow: function(input, inst) {
            $(this).attr("disabled", true);
            $(this).datepicker("widget").addClass("main-datepicker");

        }

    });
    $(".main-checkin .input-form-inout").click(function() {
        $("#checkin").datepicker("show");
    });
    $(".main-checkout .input-form-inout").click(function() {
        $("#checkout").datepicker("show");
    });
}

datePicker();
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<input type="text" id="checkin">
<input type="text" id="checkout">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

0 个答案:

没有答案