如何在div中显示datepicker？

Question

我有jquery ui datepicker，我想让我的datepicker位置固定，这就是为什么我想在响应或移动设备上的div中显示datepicker，因为当我在移动设备上使用safari浏览器滚动我的页面时，日期选择器消失了，这就是为什么我想在div中显示我的日期选择器booking.com 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);
            },
            beforeShowDay: function(date) {
                var selectedDate = $(this).datepicker('getDate'),
                    fromDate = from.datepicker('getDate');

                if (!fromDate || !selectedDate) {
                    return [true]
                }
                var dateClass = '';
                var dateClass = '';
                if (date > fromDate && date < selectedDate) {
                    dateClass = 'start';

                } else if (+date == +selectedDate) {
                    dateClass = 'stop';
                }
                return [true, dateClass];

            },
            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");
        },
        beforeShowDay: function(date) {
            var selectedDate = $(this).datepicker('getDate'),
                fromDate = from.datepicker('getDate');

            if (!fromDate || !selectedDate) {
                return [true]
            }
            var dateClass = '';
            if (date > fromDate && date < selectedDate) {
                dateClass = 'start';

            } else if (+date == +selectedDate) {
                dateClass = 'stop';
            }
            return [true, dateClass];

        },
        beforeShow: function(input, inst) {
            $(this).attr("disabled", true);
            $(this).datepicker("widget").addClass("main-datepicker");

        }

    });
  
}

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

<div id="checkin_div"></div>
<div id="checkout_div"></div>
<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>

Codepen Demo