javascript - 如何修复日期选择器调整大小响应问题？

Question

我正在我的 laravel 元素中设置一个新的插件日期选择器

并希望解决调整到移动 View 时的响应问题

这是我从他网站的日期选择器创建者报价列表中选择的自定义代码:

$(function() {
        $("#input1").persianDatepicker({

            theme: 'melon',
            alwaysShow: 1,
            cellWidth: 36,
            cellHeight: 20,
            fontSize: 15,
            calendarPosition: {
            x: 0,
            y: -93,
        },
        });  

});

这是我将日期选择器放入其中的 div 结构:

<div class="container-fluid">

    <div class="container">


            <div class="row my-4 justify-content-center">


                <div class="col-xl-3">

                    <div class="card bg-light py-4 mb-3">

                        <div class="bg-light py-5">

                            <div class="py-5 bg-light">

                                <div id="input1"></div>

                            </div>

                        </div>

                    </div>
                    <div class="card bg-primary py-4"></div>
                    <div class="card bg-primary py-4"></div>
                </div>


                <div class="col-xl-9">

                </div>                                 
            </div>  
    </div>
</div>

在笔记本电脑 View 中，我有下面的图片:

在移动 View 中(iphone 6/7/8)我有下面的图片:

所以我想你能理解我的问题是什么

问题是当有人在移动设备上打开我的页面时，日历向左移动，我不知道

如何告诉日历框跟随父 div 大小并始终适合父级内部的全尺寸

笔记本电脑 View

有关更多信息这是此插件的发布者:

---

Datepicker

Answer 1

添加这个CSS:

#input1 {
  width: 100%;
}

或者你可以这样做:

 <div id="input1" style="width:100%;"></div>