YADCF使用Bootstrap Datetimepicker时年月选择栏溢出容器问题求助

解决方案 #

1. 优先调整样式适配

直接在你的项目全局样式中加入以下CSS代码即可适配：

/* 解除YADCF容器对日期选择器的宽度限制 */
#yadcfDateDiv .bootstrap-datetimepicker-widget.dropdown-menu {
    width: 19em !important;
    max-width: unset !important;
}
/* 强制年月选项按4个一行排列，和你其他正常的选择器效果一致 */
#yadcfDateDiv .bootstrap-datetimepicker-widget .months .month,
#yadcfDateDiv .bootstrap-datetimepicker-widget .years .year {
    width: 25% !important;
    display: inline-block !important;
    box-sizing: border-box;
    text-align: center;
    padding: 4px 0;
}

2. 样式不生效时修改初始化配置

如果上面的CSS因为样式优先级问题没生效，可以直接修改YADCF的初始化参数，将日期选择器的挂载节点指定为body，脱离YADCF过滤器容器的宽度限制：

yadcf.init(tableElement.DataTable(), [
  { 
    column_number : 11, 
    filter_type: "range_date", 
    datepicker_type: 'bootstrap-datetimepicker', 
    date_format: 'YYYY-MM-DD', 
    filter_container_id: 'yadcfDateDiv',
    // 新增日期选择器配置项
    date_picker_options: {
      widgetParent: document.body
    }
  }]);

修改后年月选择面板会直接挂载到页面body节点下，继承全局的datetimepicker样式，和你项目其他位置的日期选择器效果完全一致。

内容的提问来源于stack exchange，提问作者cdouble.bhuck