jquery - Datepicker 在 Safari 上消失了

Question

我正在使用 jquery ui datepicker (range)，如果我向下滚动页面点击打开我的 datepicker 后，日历就会消失。我只在带有移动设备的 safari 浏览器上注意到这个问题

有人遇到过这个问题吗？

你能检查我的代码吗？

function datePicker(){
    $( function() {
        var dateFormat = "mm/dd/yy",
            from = $( "#checkin,.checkin" )
                .datepicker({
                    numberOfMonths: 2,
                    firstDay: 1,
                    minDate: 0,
                    beforeShow:function(){
                        $(this).datepicker("widget").addClass("main-datepicker");
                    }
                })
                .on( "change", function() {
                    to.datepicker( "option", "minDate", getDate( this ) );
                }),
            to = $( "#checkout,.checkout" ).datepicker({
                numberOfMonths: 2,
                firstDay: 1,
                minDate: 0,
                beforeShow:function(){
                    $(this).datepicker("widget").addClass("main-datepicker");
                }
            })
            .on( "change", function() {
                from.datepicker( "option", "maxDate", getDate( this ) );
            });

        function getDate( element ) {
            var date;
            try {
                date = $.datepicker.parseDate( dateFormat, element.value );
            } catch( error ) {
                date = null;
            }

            return date;
        }
    } );
}

datePicker();

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

From : <input type="text" class="checkin">
To: <input type="text" class="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>

Answer 1

更改您的代码行

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>

到

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>