The onShown event in ngx-bootstrap's datePicker is fired just before the calendar actually becomes visible

Question

The onShown event in ngx-bootstrap's datePicker is fired just before the calendar actually becomes visible

Recently, I've been exploring the capabilities of ngx-bootstrap's rangeDatePicker. My current challenge involves attempting to automatically navigate to the previous month as soon as the user opens the rangeDatePicker. To accomplish this, I have implemented a handler function that is triggered by the onShown event.

The code snippet below illustrates how I have set up the rangeDatePicker in my 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/>

While there are various properties defined for the rangeDatePicker, the key one related to my issue is:

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

In the JavaScript file, I have created the following handler function:

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

Despite my efforts, when I debug the application in Chrome, it seems like the calendar and button have not fully loaded yet, resulting in the click action failing to switch to the previous month. Can anyone provide assistance or suggestions on how to address this roadblock?

angular typescript datepicker ngx-bootstrap

Answer 1

Answer №1

Why not opt for a different approach when dealing with the onShow and onHidden events?

(onShown)="handleEvent('onShown')" (onHidden)="handleEvent('onHidden')"

.

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

Consider creating two distinct methods and passing the actual $event as an argument:

(onShown)="showDetail($event)" (onHidden)="hideDetail($event)"

This way, you can observe the event details and better understand its behavior:

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

hideDetail(event) {
  // ...
}

Answer 2

Why not opt for a different approach when dealing with the onShow and onHidden events?

(onShown)="handleEvent('onShown')" (onHidden)="handleEvent('onHidden')"

.

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

Consider creating two distinct methods and passing the actual $event as an argument:

(onShown)="showDetail($event)" (onHidden)="hideDetail($event)"

This way, you can observe the event details and better understand its behavior:

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

hideDetail(event) {
  // ...
}

The onShown event in ngx-bootstrap's datePicker is fired just before the calendar actually becomes visible

Answer №1

Similar questions

Make sure a Typescript array contains a particular value

Error: The browser threw a TypeError because Object(...) is not a function

Preventing event bubbling/propagation in custom events: a step-by-step guide

When working with React and Typescript, I encountered an issue with refs causing a typescript error: "The property 'current' does not exist on the type '(instance: HTMLInputElement | null) => void'"

transfer information from a Node.js server to an Angular client using the get() method

Problem with Invoking method of parent component from child component in Angular 4

How can you verify the anticipated log output in the midst of a function execution with Jest unit testing?

What is the best way to send a list of data as either strings or integers through a REST API using Angular's

Guide on implementing ng2-completer with translation features

Is it recommended to use prefixes for name attributes in Angular components?

Utilizing enum values in the HTML value attribute with Angular 2

Is it recommended to utilize the `never` type for a function that invokes `location.replace`?

What is the process for creating a new element and utilizing its reference to add child elements in React?

When attempting to instantiate a list from JSON in Angular, the type '{}' is lacking the following properties compared to type 'Datos[]'

Retrieve a result from an observable within a function

Discover the Prisma findMany method for implementing tanstack react table functionality

I'm having trouble incorporating TypeScript into my React useState hooks. Can someone help me troubleshoot?

Using jQuery with Angular 4 allows for powerful front-end development

Adding to an existing array in SQLite by updating a column using Sequelize

Angular: Retrieve the source after navigating