Geek Answers Handbook

Opening the angular -strap datepicker program

I am using AngularJS 1.2.12 and angular -strap 2.0.0-rc.2 (mgcrea.imtqy.com/angular-strap/) and I cannot find a way to open the datepicker / timepicker widget from the controller. I want to use an input group with a calendar icon button:

<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>

Now I can easily provide the ng-click function for the button and open the calendar from my controller. I just can't find a way to do this. Any ideas?

+6
source share
2 answers

The documentation says that you open a datepicker programmatically, but this does not provide an easy way to get a link to a datepicker that is already bound to an element.

In the project I'm working on, I have a datepicker directive that almost completely binds HTML code to myDatepicker directive. Inside this directive, the ng-click method associated with 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 appeared. I'm working on upgrading my project codebase to a newer version of angular -strap, and it seems to me that upgrading from Bootstrap UI would be a better choice, as its codebase is a bit more mature.

+5
source

Another solution is to change the button to a label and use the "for" attribute. I like it because it eliminates the extra javascript to open the datepicker, and also when the cursor tab will no longer stop on the icon.

 <div class="input-group"> <input id="createdDate" name="createdDate" class="form-control" ng-model="searchRequest.from_created" data-autoclose="1" bs-datepicker type="text"> <span class="input-group-btn"> <label class="btn btn-default" for="createdDate"> <i class="glyphicon glyphicon-calendar"></i></label> </span> </div>
+15
source

More articles:


All Articles