如何让带时间选择器的ngx-bootstrap日期范围选择器选完日期不关闭？

问题分析 #

你已配置keepDatepickerOpened: true但未生效，原因是ngx-bootstrap范围选择器默认选中起始日期后会触发面板关闭逻辑，需结合配置调整和事件回调来强制保持面板打开，直到完成时间范围选择。

步骤1：调整HTML配置 #

保留keepDatepickerOpened: true，同时修改outsideClick并明确范围选择配置，避免意外关闭：

<input
  type="text"
  class="form-control"
  #daterangepicker="bsDaterangepicker"
  [ngModel]="calendardDate"
  bsDaterangepicker
  [outsideClick]="false"
  [bsConfig]="{
    containerClass: 'theme-dark-blue',
    rangeInputFormat: 'DD/MM, h:mm a',
    dateInputFormat: 'DD/MM, h:mm a',
    showWeekNumbers: false,
    maxDateRange: 60,
    withTimepicker: true,
    keepDatepickerOpened: true,
    keepDatesOutOfRules: true,
    isAnimated: true,
    singleDatePicker: false
  }"
  (bsValueChange)="changeCalendarDate($event,false,daterangepicker)"
  (click)="clickDatePicker(daterangepicker)"
/>

步骤2：修改组件事件回调 #

在changeCalendarDate方法中，判断是否完成范围选择，未完成则手动重新打开面板：

changeCalendarDate(event: any, isReset: boolean, daterangepicker: any) {
  // 保留原有业务逻辑
  this.calendardDate = event;

  // 仅选中起始日期时，重新打开面板
  if (event?.start && !event?.end) {
    setTimeout(() => {
      daterangepicker.show();
    }, 0);
  }
}

补充说明 #

• outsideClick: false是为了避免用户调整时间时误触外部导致面板关闭，若需保留外部关闭功能，可在选中完整时间范围后，通过代码动态设置outsideClick为true。
• setTimeout用于避开组件内部的关闭逻辑执行时机，确保手动打开操作生效。

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