Closing angular-bootstrap-datetimepicker on date click

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>

1 answer

  • answered 2017-01-11 14:25 Aminadav

    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)