How to not show angular ui datepicker dropdown together

Question

I have used this Bootstrap datepicker with angular directive. It works fine. Now I need to one more little customization. When clicking first input, it will show first dropdown calender. Clicking another opens another calender dropdown. All I need now those dropdown won't show together. I mean when first dropdown is open, clicking on second input will open second dropdown as well as first dropdown should close. Similarly, when second dropdown is open, clicking on first input will open first calender dropdown and second dropdown should be close.

So, I need to do something like similar:

when date1 is open
close date2 if it is open
when date2 is open
close date1 if it is open

But, as I am new in angular, I don't understand how to do that in angular way. How to do that?

Plunker work

Anita · Accepted Answer · 2015-04-16 13:02:40Z

3

If you have only 2 datepicker then you can do it like this in place of

 $scope.open[date] = true;

put this

if(date=== 'date4'){
        $scope.open['date4'] = true;
        $scope.open['date5'] = false;
      }else{
        $scope.open['date4'] = false;
        $scope.open['date5'] = true;
      }

And if you have multiple datepicker then you can call loop to close them.

answered Apr 16, 2015 at 13:02

Anita

2,4102 gold badges21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to not show angular ui datepicker dropdown together

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related