时间戳

首页 > 解决方案 > Ngx-bootstrap 日期选择器自定义范围

angular - Ngx-bootstrap 日期选择器自定义范围

问题描述

我想在 datepicker 中添加一些带有自定义范围的按钮。我正在使用来自 ngx-bootstrap 的快速选择范围：https ://valor-software.com/ngx-bootstrap/#/datepicker#quick-select-ranges

我可以使用它们，但就我而言，我想问一下，是否有可能从这些按钮中获取事件？我需要这些按钮的确切事件，而不是通过单击任何按钮直接更改日期。谢谢你的帮助。

标签： angularngx-bootstrap

解决方案

检查您可以订阅输出部分下的事件发射器的api 参考。bsValueChange

更改日期选择器值时发出

下面是一个如何订阅组件 api 的示例：

ts：

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));    
  }
}

html:

<input type="text"            
       bsDaterangepicker
       [bsConfig]="{ ranges: ranges }">

推荐阅读