[英]Ngx-bootstrap datepicker custom ranges
我想在 datepicker 中添加一些带有自定义范围的按钮。 我正在使用快速 select 范围从 ngx-bootstrap: https://valor-software.com/ngx-bootstrap/#/datepicker#quick-select-ranges
我可以使用它们,但就我而言,我想问一下,是否有可能从这些按钮中获取事件? 我需要这些按钮的确切事件,而不是通过单击任何按钮直接更改日期。 谢谢你的帮助。
检查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 }">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.