Angular Ngx引导日期选择器自定义范围

Angular Ngx引导日期选择器自定义范围,angular,ngx-bootstrap,Angular,Ngx Bootstrap,我想在datepicker中添加一些自定义范围的按钮。我正在使用ngx引导的快速选择范围: 我可以使用它们,但在我的情况下,我想问一下,是否有可能从这些按钮获取事件?我需要的正是这些按钮的事件,而不是通过点击任何按钮直接更改日期。感谢您的帮助。检查“您可以订阅输出”部分下的“bsValueChange事件发射器” 更改日期选择器值时发出 以下是如何订阅组件api的示例: ts: html: 检查“输出”部分下的“您可以订阅”bsValueChange事件发射器 更改日期选择器值时发出 以下

我想在datepicker中添加一些自定义范围的按钮。我正在使用ngx引导的快速选择范围:

我可以使用它们,但在我的情况下,我想问一下,是否有可能从这些按钮获取事件?我需要的正是这些按钮的事件,而不是通过点击任何按钮直接更改日期。感谢您的帮助。

检查“您可以订阅输出”部分下的“bsValueChange事件发射器”

更改日期选择器值时发出


以下是如何订阅组件api的示例:

ts:

html:


检查“输出”部分下的“您可以订阅”bsValueChange事件发射器

更改日期选择器值时发出


以下是如何订阅组件api的示例:

ts:

html:



在下图中,第一个选定日期文本框是daterangepicker中第二个文本框的开始日期。我无法设置日期范围选择器的初始日期。无法在下图中看到图像,第一个文本框“选定日期”是daterangepicker中第二个文本框的开始日期。我无法设置日期范围选择器的初始日期。无法看到图像
import { Component, ViewChild } from '@angular/core';
import { BsDaterangepickerDirective } from 'ngx-bootstrap/datepicker';

@Component({
  selector: 'app-daterangepicker',
  templateUrl: './date-range-picker.component.html'
})
export class DateRangePickerComponent {
  ranges: any = [{
    value: [new Date(new Date().setDate(new Date().getDate() - 7)), new Date()],
    label: 'Last 7 Days'
  }, {
    value: [new Date(), new Date(new Date().setDate(new Date().getDate() + 7))],
    label: 'Next 7 Days'
  }];

  @ViewChild(BsDaterangepickerDirective, { static: false }) dateRangePicker: BsDaterangepickerDirective;

  ngAfterViewInit() {
    this.dateRangePicker.bsValueChange.subscribe(res => console.log(res));    
  }
}
<input type="text"            
       bsDaterangepicker
       [bsConfig]="{ ranges: ranges }">