Ngx-bootstrap datepicker custom ranges

Question

I would like to add some buttons with my custom ranges in datepicker. I'm using Quick select ranges from ngx-bootstrap: https://valor-software.com/ngx-bootstrap/#/datepicker#quick-select-ranges

I am able to use them, but in my case, I would like to ask, if there is a possibility to get an event from those buttons? I need exactly the event from those buttons, not from changing date directly by clicking on any button. Thanks for any help.

Shahar Shokrani Shahar Shokrani · Accepted Answer · 2020-05-30T19:17:16

Check the api reference you can subscribe to the bsValueChange event emitter under the Outputs section.

Emits when datepicker value has been changed

Here is an example of how to subscribe to the component 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 }">

Ngx-bootstrap datepicker custom ranges

1 Answers