CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrapangular-ui-bootstrap
Michael
Michael

Reputation: 16142

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>

Upvotes: 1

Views: 901

Answers (1)

Aminadav Glickshtein
Aminadav Glickshtein

Reputation: 24640

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)

Upvotes: 1

Related Questions