如何用Angular、Bootstrap实现常驻显示的日期范围选择日历

实现方案 #

完全基于Angular Material原生的mat-date-range-picker能力改造，无需引入第三方组件，通过修改选择器状态、调整浮层定位样式的方式，实现日历直接嵌入页面文档流，无需点击触发按钮即可常驻展示。

改造操作 #

• 移除原有代码中用于弹出浮层的关联元素：包括包裹输入框的mat-form-field、日期范围输入框、日期切换触发图标，这类元素是浮层触发链路的组成部分，常驻场景下不需要展示。
• 为mat-date-range-picker添加[opened]="true"强制属性，让选择器始终保持打开状态，不会因为用户失焦、点击页面外部区域自动关闭。
• 覆盖Material默认给日期选择器添加的浮层绝对定位样式，将原本悬浮的日历面板改为静态文档流定位，取消浮层的高z-index等悬浮属性，让日历正常占据页面空间展示。
• 原有日期范围的表单绑定逻辑完全兼容，用户在日历上点选起止日期时，选中值会正常同步到组件的FormGroup实例中。

改造后模板代码 #

<!-- 常驻展示的日期范围选择日历 -->
<mat-date-range-picker 
  #picker
  [opened]="true">
</mat-date-range-picker>

<!-- 选中值展示 -->
<p>已选择的日期范围: {{range.value | json}}</p>

<!-- 合法性校验提示 -->
<mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">无效的开始日期</mat-error>
<mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">无效的结束日期</mat-error>

配套样式调整 #

由于日期选择器默认以浮层形式渲染在CDK的overlay容器中，需要通过样式覆盖让浮层回到正常文档流：

::ng-deep .cdk-overlay-connected-position-bounding-box {
  position: static !important;
  z-index: auto !important;
}

注意：如果应用开启了ViewEncapsulation严格模式，需要使用::ng-deep穿透组件样式边界，才能让样式正常作用到Material生成的浮层元素上。

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