我想在datepicker中添加一些带有自定义范围的按钮。我正在使用ngx-bootstrap中的快速选择范围:https://valor-software.com/ngx-bootstrap/#/datepicker#quick-select-ranges
我可以使用它们,但就我而言,我想问一下,是否有可能从这些按钮获取事件?我完全需要这些按钮中的事件,而不是直接单击任何按钮来更改日期。感谢您的帮助。
检查api reference,您可以使用输出部分下的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 }">