Opening the angular-strap datepicker programmatically

Question

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?

Kalahari

they have option for manual openning, so you probably need to write function that would open the date picker, and set her to your ng-click, and also when you need to open it from code using $datepicker.show I didn't check it but you can use their src code as reference : github.com/mgcrea/angular-strap/blob/master/src/datepicker/… – Referee

there is solution, just check it with their code – Referee

Answer 1

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.

Capercaillie

Gah, had to do this too. created an issue, no feedback yet – Leftover

Answer 2

Another solution is to change the button to a label, and use the 'for' attribute. I like it because it eliminates extra javascript to open the datepicker, and also when tabbing the cursor won't stop on the icon anymore.

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

Ruano

Very elegant solution! – Austerity

That's so neat! I've been looking for a good solution for ages. Thanks :-) – Revest