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?


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

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:

        if(!newValue) return

    See this Plnkr for example of use:

    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)