步骤1：更新HTML模板，添加快捷选择按钮 #

先在你的日期选择器旁边添加上三个按钮，绑定对应的点击事件：

<div class="form-group">
    <label class="head-label">Date Range:</label>
    <div class="input-group filter-calendar">
        <my-date-range-picker name="mydaterange" [options]="myDateRangePickerOptions" [(ngModel)]="selectedFilters.date"></my-date-range-picker>
    </div>
    <!-- 添加快捷选择按钮 -->
    <div class="mt-2">
        <button class="btn btn-sm btn-primary" (click)="selectLast7Days()">最近7天</button>
        <button class="btn btn-sm btn-secondary ms-2" (click)="selectLastMonth()">最近1个月</button>
        <button class="btn btn-sm btn-success ms-2" (click)="selectLastYear()">最近1年</button>
    </div>
</div>

步骤2：在组件TS文件中实现日期计算逻辑 #

接下来在你的Angular组件类里，编写三个点击事件对应的方法，计算出对应的开始和结束日期，然后赋值给selectedFilters.date（注意要匹配my-date-range-picker要求的日期格式，通常是包含beginDate和endDate的对象，每个日期对象有year、month、day属性）：

import { Component } from '@angular/core';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  selectedFilters: any = {
    date: {
      beginDate: null,
      endDate: null
    }
  };

  myDateRangePickerOptions: any = {
    // 保留你原有的配置项
    dateFormat: 'yyyy-mm-dd',
    // 其他配置...
  };

  // 计算最近7天（包含当日）
  selectLast7Days() {
    const today = new Date();
    const sevenDaysAgo = new Date(today);
    sevenDaysAgo.setDate(today.getDate() - 6); 

    this.setDateRange(sevenDaysAgo, today);
  }

  // 计算最近1个月
  selectLastMonth() {
    const today = new Date();
    const oneMonthAgo = new Date(today);
    oneMonthAgo.setMonth(today.getMonth() - 1);

    this.setDateRange(oneMonthAgo, today);
  }

  // 计算最近1年
  selectLastYear() {
    const today = new Date();
    const oneYearAgo = new Date(today);
    oneYearAgo.setFullYear(today.getFullYear() - 1);

    this.setDateRange(oneYearAgo, today);
  }

  // 统一设置日期范围的工具方法
  private setDateRange(start: Date, end: Date) {
    this.selectedFilters.date = {
      beginDate: {
        year: start.getFullYear(),
        month: start.getMonth() + 1, // 注意：JS Date的月份是0-11，组件需要1-12格式
        day: start.getDate()
      },
      endDate: {
        year: end.getFullYear(),
        month: end.getMonth() + 1,
        day: end.getDate()
      }
    };
  }
}

注意事项 #

• 确认my-date-range-picker的日期格式要求：如果你的组件接受字符串格式的日期，可以把日期转换为对应格式（比如yyyy-mm-dd）再赋值。
• 边界情况处理：如果需要更精确的“最近1个月”（比如当月第一天到当日），可以调整oneMonthAgo的计算逻辑为oneMonthAgo.setDate(1)。
• 样式适配：可以根据项目UI风格替换按钮的样式类，比如用自定义的按钮类替代示例中的btn-primary等。

这样点击对应的按钮，就会自动把日期范围设置为对应的最近周期啦！

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