Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

multiple components with same ngbdatepicker

See original GitHub issue

.toggle() doesnt close the previous opened datepicker window (working with multiple datepicker components)

to reporoduce:

click on left button - it opens first window
click on right button - it opens second window and doesnt close the previous

stackblitz

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

jnizetcommented, May 17, 2020

It does. But your two datepickers have the same positionTarget element, so they both open themselves exactly at the same place.

Here’s your stackblitz with two different positionTarget: https://stackblitz.com/edit/angular-ivy-d8dprn?file=src/app/random-component/random-component.component.html

as you can see, one closes when the other is opened.

0reactions

kernydencommented, May 31, 2020

@benouat ye, i tried, but in some cases it “doesnt work well with” and looks like it very sensitive to higher position-relative containers. Im sure cdk dnd with it pointer-events styles the reason why.

Top Results From Across the Web

Multiple Datepicker in one form Angular2 with difference ...

My favorite solution for cases like this is to create my own component that extends the one provided by library to fulfill my...

NG0300: Multiple components match with the same tagname

Two or more components use the same element selector. Because there can only be a single component associated with an element, selectors must...

ngb-datepicker multi date picker - StackBlitz

Multi -select date picker based on ngb-date-picker. ... import { Component } from '@angular/core';. import { NgbDateStruct } from '@ng-bootstrap/.

NgbDatepicker - Angular powered Bootstrap

A highly configurable component that helps you with selecting calendar dates. NgbDatepicker is meant to be displayed inline on a page or put...

Form Datepicker | Components - BootstrapVue

<b-form-datepicker> supports many of the props available on <b-calendar> as well ... which is the same format returned by native browser <input type="date"> ......