如何让ngx-bootstrap的BsDatepicker始终处于打开状态？

我之前也碰到过类似的需求，给你分享两个靠谱的解决思路，应该能帮你搞定😎

思路一：直接使用内联日期选择器（最简单） #

你提到旧版本有内联版本，其实当前ngx-bootstrap依然保留了内联组件，只是可能你没注意到。内联版本默认就是始终显示的，完全不需要控制开关状态，非常适合你的需求。

代码示例： #

<!-- 直接使用内联组件，默认始终打开 -->
<bs-datepicker 
  [(bsValue)]="dts.dt" 
  [bsConfig]="bsConfig" 
  [minDate]="minDate" 
  [maxDate]="maxDate"
></bs-datepicker>

组件里的配置和你之前写的差不多：

import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

// ...
public bsConfig: Partial<BsDatepickerConfig>;

ngOnInit(): void {
  this.bsConfig = {
    containerClass: 'theme-orange',
    showWeekNumbers: true
  };
}

这个方案的好处是零额外逻辑，组件本身就支持始终显示，样式也可以根据需求调整。

思路二：通过组件引用手动控制弹出式日期选择器 #

如果你必须用带输入框的弹出式版本，那可以通过ViewChild获取组件实例，强制维持打开状态。之前你设置isOpen=true无效，是因为组件内部会在点击外部、选择日期等操作时自动修改这个状态，所以需要动态拦截并重置。

步骤及代码： #

1. 在模板中给日期选择器添加模板引用变量
2. 在组件中通过ViewChild获取引用
3. 初始化时手动打开，并监听关闭事件重新打开

模板代码：

<input 
  type="text" 
  class="form-control" 
  bsDatepicker 
  #dp="bsDatepicker"
  [(bsValue)]="dts.dt" 
  [bsConfig]="bsConfig" 
  [minDate]="minDate" 
  [maxDate]="maxDate"
>

组件代码：

import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { BsDatepickerDirective, BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnInit, AfterViewInit {
  @ViewChild('dp') datepicker!: BsDatepickerDirective;
  public bsConfig: Partial<BsDatepickerConfig>;
  dts = { dt: new Date() };
  minDate = new Date();
  maxDate = new Date(new Date().setMonth(new Date().getMonth() + 1));

  ngOnInit(): void {
    this.bsConfig = {
      containerClass: 'theme-orange',
      showWeekNumbers: true
    };
  }

  ngAfterViewInit(): void {
    // 初始化时手动打开日期选择器
    this.datepicker.show();

    // 监听关闭事件，一旦关闭立刻重新打开
    this.datepicker.onHidden.subscribe(() => {
      // 用setTimeout确保组件完成关闭逻辑后再执行打开
      setTimeout(() => {
        this.datepicker.show();
      }, 0);
    });
  }
}

原理说明： #

• 使用show()方法比直接设置isOpen更可靠，因为它会触发组件内部完整的打开逻辑
• 订阅onHidden事件，不管是点击外部还是选择日期导致关闭，都会立刻重新打开
• 加入setTimeout是为了避免状态冲突，确保组件完成关闭流程后再执行打开操作

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