如何修复 datepicker 调整大小响应问题？答案

【问题标题】：How to fix datepicker resizing responsive problem?如何修复 datepicker 调整大小响应问题？
【发布时间】：2019-07-10 02:30:00
【问题描述】：

我正在我的 laravel 项目中设置一个新的插件 datepicker

并希望在调整到移动视图时解决响应问题

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

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

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

});

这是我将 datepicker 放入其中的 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>

在笔记本电脑视图中，我有下面的图片：

在移动视图中（iphone 6/7/8）我有下面的图片：

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

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

如何告诉日历框遵循父 div 大小并始终适合父级内的完整大小，如

笔记本电脑视图

欲了解更多信息，这是此插件的发布者：

Datepicker

【问题讨论】：

你的照片没有显示？
你有宽度：100% 吗？
请告诉我具体点在哪里？
你的日历是什么元素？
#input1 是你的元素没有一直延伸，对吧？

标签： javascript jquery css laravel plugins

【解决方案1】：

添加这个css：

#input1 {
  width: 100%;
}

或者你可以这样做：

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

【讨论】：

穿上
元素。我不知道哪一个是你的日历。像在图片中那样检查它，找到不是 100% 宽度的元素。
你的意思是我应该将 width :100% 设置为所有 div 吗？
你想把它放在你想要 100% 跨越的 div 上，而不是全部。

【解决方案2】：

尝试添加此 CSS。

// only apply style on mobile
@media only screen and (max-width: 320px) {
  .pdp-default { 
    // Set calendar parent element to 100% width
    width: 100%;
    // Override inline left position set by plugin
    left: 0!important;
  }
  .pdp-default .cell {
     // set percent width of calendar date cells 7/100 = 14.28571428571429
     width: 14.28571428571429%!important;
     // Style calendar dates to stay at required aspect ratio
     height: 0!important;
     padding-bottom: 8%;
  }
}

【讨论】：

有所改变：在 iphone 5/SE 尺寸中，日历从左右拉伸全尺寸屏幕！不向父 div ... 日历拉伸宽度大小并粘在左右屏幕上
将 position:relative; 添加到父 div。
对不起，我刚刚注意到该插件在结束正文标记的末尾附加了日历的 HTML。这意味着它实际上不在您的 DIV 结构中，因此您将无法使用 CSS 实现您想要的。您将需要查看获取父元素的宽度并使用您自己的 javascript 将其应用于日历父元素。
是的，在检查结束时我可以看到 html 日历，但我不知道这是为了什么，现在你清楚了...... tnx 但我不知道 javascript 那我该怎么办？
遗憾的是，您需要使用 javascript。唯一的其他解决方案是让您的父 div 在移动设备上 100% 宽度（这在移动设备上很正常）并且仅应用我在移动设备上提供的 CSS，因此日历将默认为平板电脑和台式机上的正常大小。