Opening the angular-strap datepicker programmatically
angular-strap, angularjs, datepicker, javascript
Solution
The documentation talks about opening the datepicker programmatically, but it doesn't give an easy way to get a reference to a datepicker that's already bound to an element.
In a project I'm working on I have a datepicker directive that wraps almost exactly the HTML you have into a `myDatepicker` directive. Inside that directive the `ng-click` method bound to the `<button>` element is essentially:
scope.openDatepicker = function() {
element.children('input').focus();
}
which worked well enough for me.
Since angular-strap has been rewritten to get rid of any bootstrap.js dependencies a lot of bugs and oddities have been introduced. I'm working on upgrading my project's codebase to the newer version of angular-strap, and I feel like going with UI Bootstrap would have been a better choice, since its codebase is a bit more mature.
Problem
I am using AngularJS 1.2.12 and angular-strap 2.0.0-rc.2 (mgcrea.github.io/angular-strap/) and I can't find a way to open the datepicker/timepicker widget from within the controller. I want to use an input-group with a calendar-icon-button like this: ``` <div class="input-group"> <input class="form-control" ng-model="searchRequest.from_created" data-autoclose="1" bs-datepicker type="text"> <span class="input-group-btn"> <button type="button" class="btn btn-default"> <i class="glyphicon glyphicon-calendar"></i></button> </span> </div> ``` I now could easily provide an ng-click function for the button and open the calendar from my controller. I just can't find a way how to do this. Any ideas?