YADCF Bootstrap Datetimepicker 从容器溢出

Posted 2023-05-07

【中文标题】YADCF Bootstrap Datetimepicker 从容器溢出

【英文标题】：YADCF Bootstrap Datetimepicker Overflowing from Container

【发布时间】：2021-11-06 15:35:09

【问题描述】：

我在使用带有 Bootstrap-Datetimepicker 样式选项的 DataTables 的 YADCF 日期过滤器时遇到问题。问题是 Months/Years/ 从下拉容器中溢出。奇怪的是，实际的日期选择看起来不错。我在下面包含了一些屏幕截图。

这是月份选择的样子，年份选择看起来是一样的。

---

但是，日期选择看起来很正常，如下所示：

---

我的应用中还有其他看起来正常的日期选择器下拉菜单：

这样初始化日期过滤字段：

yadcf.init(tableElement.DataTable(), [
   column_number : 11, 
    filter_type: "range_date", 
    datepicker_type: 'bootstrap-datetimepicker', 
    date_format: 'YYYY-MM-DD', 
    filter_container_id: 'yadcfDateDiv'
  ]);

我似乎无法弄清楚需要什么样式属性来解决这个问题。我已经尝试调整几个月的填充/边距（如我发现的其他帖子中所建议的那样），但这只是使它们更靠近在一起，而不是像最后一个屏幕截图那样彼此下方。如果有人有任何想法，将不胜感激。

版本

YADCF：0.9.4 数据表：1.10.16 Eonasdan/bootstrap-datetimepicker4.7.14

【参考方案1】：

翻阅Eonasdan/bootstrap-datetimepicker 文档后，我发现DateTimePicker 插件有一个WidgetParent 选项，可用于设置小部件所在的父元素。

由于我通过 YADCF 初始化 DateTimePicker 插件并传入自定义的 filter_container_id，我发现如果我还将相同的元素传递给 WidgetParent 属性，它将按预期显示。

我已将以下代码添加到已解决此问题的页面的 DataTable 初始化函数中：

$('input[id^="#yadcf-filter--orders-datatable"]').data("DateTimePicker").options(
  "widgetParent": '#yadcfDateDiv'
);

它选择由 DateTimePicker 对象绑定到的 YADCF 插件生成的两个输入字段，并设置适当的父元素。

希望这对未来的 Google 员工有所帮助。