如何配置bsDaterangepicker弹窗显示指定月份？

我刚好对ngx-bootstrap的bsDaterangepicker组件很熟悉，你的需求完全可以通过配置组件的bsConfig属性来实现，同时还能满足“仅允许选择过去时段”的要求，具体操作如下：

步骤1：在组件类中定义配置项 #

首先在你的Angular组件里，导入BsDaterangepickerConfig，然后创建自定义的配置对象，核心是设置初始显示的起始日期为上个月的第一天，同时限制最大可选日期为今天：

import { Component } from '@angular/core';
import { BsDaterangepickerConfig } from 'ngx-bootstrap/daterangepicker';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 用于绑定选中的日期范围
  selectedDateRange: Date[] = [];
  // 配置daterangepicker的参数
  bsDatePickerConfig: Partial<BsDaterangepickerConfig>;

  constructor() {
    // 计算上个月的第一天
    const lastMonthFirstDay = new Date();
    lastMonthFirstDay.setDate(1);
    lastMonthFirstDay.setMonth(lastMonthFirstDay.getMonth() - 1);

    // 获取当前日期
    const today = new Date();

    // 初始化配置
    this.bsDatePickerConfig = {
      // 设置日历打开时的起始视图日期为上个月第一天，确保显示上月和当前月
      startDate: lastMonthFirstDay,
      // 限制最大可选日期为今天，禁止选择未来日期
      maxDate: today,
      // 可选：开启月份/年份下拉选择器，方便快速切换
      showDropdowns: true,
      // 可选：自定义预设范围，比如直接提供“上个月”选项
      ranges: {
        '上个月': [lastMonthFirstDay, today]
      }
    };
  }
}

步骤2：在模板中绑定配置 #

在你的组件模板里，给bsDaterangepicker指令绑定配置和ngModel：

<input 
  type="text"
  class="form-control"
  bsDaterangepicker
  [(ngModel)]="selectedDateRange"
  [bsConfig]="bsDatePickerConfig"
  placeholder="选择日期范围"
/>

原理说明 #

设置startDate为上个月的第一天后，daterangepicker打开时会自动展示包含该日期的月份（也就是上个月），再加上默认显示的相邻月份（当前月），刚好符合你要的“当前月和上月”的视图效果。同时maxDate设置为今天，完美适配你“仅选择过去时段”的业务场景。

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