ngx-bootstrap's datePicker (onShown) event is triggered before calendar is really shown

user_8889351 0
Viewed 3171

I'm working with ngx-bootstrap's rangeDatePicker, and I'm trying to go to the previous month as soon as the rangeDatePicker is shown, using it inside my handler function, which is called with the onShown event.

Code is the following: in the HTML

 <input id="input-range-dates" type="text" class="form-control" bsDaterangepicker #drp="bsDaterangepicker" [bsConfig]="bsConfig"
                 [(ngModel)]="bsRangeValue" (ngModelChange)="onChanges($event, drp)" [maxDate]="maxDate" placement="bottom"
                     (onShown)="handler('onShown')" (onHidden)="handler('onHidden')" readonly/>

As you can see, there are lots of properties, but the only one regarding this question is the 

(onShown)="handler('onShown')"

in the JS

handler(value: string): void {
if ('onShown' === value) {
      [].slice.call(document.getElementsByClassName('previous')).filter(element =>
        element.innerText === '‹')[0].click(); // previous Month
  }
}

However if I debug it on chrome, I can see that the calendar with the button has not appeared yet, and the click action does not change the month.

Somebody can help with this? I'm stuck..

ngx-bootstrap angular typescript datepicker
1 Answers

Instead of using the same handler method for the onShow and onHidden events: 

(onShown)="handler('onShown')" (onHidden)="handler('onHidden')"

.

handler(value: string): void {
if ('onShown' === value) {
      //...
  }
}

I suggest to create two separate methods and pass the real $event inside:

(onShown)="onShow($event)" (onHidden)="onHidden($event)"

so you can play with the event and see what's happening:

onShow(event) {
  console.log(event);
  // ...
}

onHidden(event) {
  // ...
}
user_34976710
Related