CODEWITHSUNDEEP
angularngx-bootstrap
Amit
Amit

Reputation: 1491

how to use multiple ngx-bootstrap date pickers in a component

My requirement is to use more than two date pickers in the same html. I am using ngx-bootstrap date picker. My date picker has an image on click of which date picker shows up. but when I am using more than two date picker date picker is not working as it should work. Just say i have two date pickers with image on it A and B. When i click on the image of A date-picker shows up of A but when i click on the image of B and it toggles for the A only and vice-versa. on click of the image I am calling dp.toggle() function which is same for the other date pickers as well.I can be terribly wrong but I think because it refers to the same old instance of dp instead. I cannot use date-range picker as in date range picker selecting values for both the dates are mandatory and for me this is not the case.

I tried googling but didn't find any relevant information. Any help/suggestions will be highly appreciated. Thanks

Upvotes: 4

Views: 2973

Answers (1)

IlyaSurmay
IlyaSurmay

Reputation: 2333

You have duplicated template references (#dp="bsDatepicker" is used for both datepickers). Changing template variable name for second datepicker will solve this. https://plnkr.co/edit/FGOcj79X1mx3ZPMBKX6C?p=preview

Upvotes: 6

Related Questions