Angular UI: Dropdown not working with datepicker

Question

I am trying to add Datepicker in dropdown as follows and have set autoClose="outsideClick". However, when any month button is pressed it toggles the dropdown. How to solve this?

Html Code:

<div class="date-wrap pull-right" dropdown auto-close="outsideClick">
                <button class="btn btn-info" dropdown-toggle>Date Picker</button>
                <div class="dropdown-menu  datepicker" role="menu">
                        <datepicker show-weeks="false" ng-model="dt"></datepicker>
                </div>
</div>

Plunker: http://plnkr.co/edit/lBn3Oo?p=preview

Where is the input on which you are targeting this datepicker? — Anand G
– Anand G, Commented Oct 14, 2015 at 12:37

dfsq · Accepted Answer · 2015-10-14 12:39:25Z

7

You need to manually prevent click event from bubbling, so it never reaches the topmost node (document) that closes dropdown:

<div class="date-wrap pull-right" dropdown auto-close="outsideClick">
    <button class="btn btn-info" dropdown-toggle>Date Picker</button>
    <div class="dropdown-menu  datepicker" role="menu" ng-click="$event.stopPropagation()">
        <datepicker show-weeks="false" ng-model="dt"></datepicker>
    </div>
</div>

Note, ng-click="$event.stopPropagation()" that does the trick.

Demo: http://plnkr.co/edit/pPwW83Ro0u0g4dVhyZaZ?p=info

answered Oct 14, 2015 at 12:39

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Collectives™ on Stack Overflow

Angular UI: Dropdown not working with datepicker

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