Closing angular-bootstrap-datetimepicker on date click

Question

I am using UI Bootstrap drop-down component to show angular-bootstrap-datetimepicker calendar on click. I works mostly fine, but the calendar block only closes on click away, it doesn't when you click on the calendar.

How can I make the calendar block close onclick of calendar's date, without using jQuery?

Plunker
GIF

<div uib-dropdown>
  <h4>
    <a uib-dropdown-toggle href="">Select Date <b class="caret"></b>
    </a>
  </h4>
  <ul uib-dropdown-menu>
    <datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }"></datetimepicker>
  </ul>
</div>

Aminadav Glickshtein · Accepted Answer · 2017-01-11 14:36:55Z

1

You don't need jQuery. You can use $scope.$watch and angular.element to automatically close is:

  $scope.$watch('date',function(newValue){
    newElement=angular.element(document.getElementsByClassName('.uib-dropdown'))
    if(!newValue) return
    angular.element(document.getElementsByClassName('dropdown')).removeClass('open')
  })

See this Plnkr for example of use: https://plnkr.co/edit/tJr7XO5dJUrIWshyfKX6?p=preview

Just a note: It is better to use tag id, instead of class name (if you have multi dropdown's).

Removing and adding the open class it's equivalent to click the dropdown arrow (and showing and hiding the calendar)

answered Jan 11, 2017 at 14:36

Aminadav Glickshtein

24.8k13 gold badges84 silver badges118 bronze badges

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

2 Comments

Michael Over a year ago

I noticed a small issue with your solution. After you select a date, calendar block opens only on a second click. Do you know how can I prevent that?

Michael Over a year ago

problem in aria-expanded

Collectives™ on Stack Overflow

Closing angular-bootstrap-datetimepicker on date click

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related