升级ngx-datepicker后daterangepicker日历上下排列而非并排的解决方案求助

升级ngx-datepicker版本后，未做任何代码改动，但日期范围选择器（daterangepicker）的双日历从原本的并排显示变为上下排列。

相关代码 #

<div class="filter-value" *ngIf="dateRange">
    <div class="form-group date-picker">
        <label for="designation">Date</label>
        <input type="text" id="date-of-joing" class="form-control" placeholder="Select Date Range" bsDaterangepicker [minDate]="minDate" [maxDate]="currentFYendDate" [readonly]="true" [bsConfig]="{ rangeInputFormat: 'DD-MM-YYYY',selectFromOtherMonth: true}" value="{{dateValue | date:'dd-MM-yyyy'}}" [(bsValue)]="dateRangeValue" (bsValueChange)="dateRangeChange($event)">
    </div>
</div>

升级前后对比 #

• 升级前双日历并排显示：
  
• 升级后双日历上下排列：
  

解决方案 #

• 查阅版本更新日志：查看ngx-datepicker官方更新文档，确认新版本是否调整了日期范围选择器的布局样式，是否新增了控制双日历排列的配置参数。
• 自定义CSS覆盖样式：如果新版本默认修改了布局规则，可通过自定义CSS强制恢复并排布局：

/* 强制双日历并排显示 */
.daterangepicker .calendar-table {
    display: inline-block;
    float: left;
    margin: 0 10px;
}
/* 调整选择器容器宽度以适配双日历 */
.daterangepicker {
    min-width: 620px !important;
}

• 调整bsConfig配置：部分版本可能新增了控制布局方向的配置项，尝试在bsConfig中添加垂直布局禁用参数（以官方文档为准）：

[bsConfig]="{ rangeInputFormat: 'DD-MM-YYYY', selectFromOtherMonth: true, isVertical: false }"

• 版本回退验证：临时回退到升级前的ngx-datepicker版本，确认问题是否由版本升级直接导致，再针对性排查新版本的变更点。

内容的提问来源于stack exchange，提问作者Lovitha