Angular-Ui Bootstrap DatePicker Open on focus

Question

Though this may seem like a simple question, I can't find anywhere a solution.

Simple as this:

<input type="text" datepicker-popup>

I want that when the cursor enters, the calendar popup automatically shows up, like jquery-ui datepicker. Now I have to either provide a button or Alt-down, both unfriendly to me.

There is a is-open attribute but I dont want to complicate things putting variables in the scope for something that probably should already be available as a configuration? :D.

Thanks

Answer 1

EDIT:

I finally found the solution. It's a little tricky but it works. Here is the directive:

app.directive("autoOpen", ["$parse", function($parse) {
  return {
    link: function(scope, iElement, iAttrs) {
      var isolatedScope = iElement.isolateScope();
      iElement.on("focus", function() {
        isolatedScope.$apply(function() {
          $parse("isOpen").assign(isolatedScope, "true");
        });
      });

      // Remove DOM Event Listener when $destroy lifecycle event is fired
      scope.$on('$destroy', function() { iElement.off("focus") })
    }
  };
}]);

And this is view:

<input type="text" datepicker-popup="" ng-model="ctrl.dt" auto-open />

This is the older solution:

You can write a directive to change the value of is-open when input focuses:

app.directive("autoOpen", ["$parse", function($parse) {
  return {
    link: function(scope, iElement, iAttrs) {
      var isOpenVarName = iAttrs.isOpen;
      iElement.on("focus", function() {
        $scope.$apply(function() {
          $parse(isOpenVarName).assign(scope, "true");
        });
      });
    }
  };
}]);

and here is the view:

  <input type="text" datepicker-popup="" auto-open is-open="open" ng-model="ctrl.dt" />

Note that, you have to define open in your controller and place is-open="open" in input element. I know this is not the best solution. I will make it better as soon as find a better solution.

Update : As @Akos-lukacs mentioned in comments, this solution does not work when disabling debug data in angular.

Answer 2

alisabzevari's answer seems fine to me, but you might be better off just doing this:

ng-focus='open = true'

I struggled to wrap my head around how exactly is-open works, but I ended up just making a wrapper directive that does all the typical setup for my datepickers and sets up a separate scope for the is-open state:

app.directive('datepickerAuto', function() {
    return {
        require: ['ngModel'],
        restrict: 'E',
        template: '<input class="input form-control" datepicker-popup="MM/dd/yyyy" show-weeks="false"' +
            ' is-open="autoIsOpen" ng-focus="autoIsOpen = true" ng-click="autoIsOpen = true"'
            +' type="text" ng-model="ngModel" ng-model-options="{\'updateOn\': \'blur\'}"/>',
        link: function(scope) {
            scope.autoIsOpen = false;
        },
        scope: {
            ngModel: '='
        }
    };
});

All I have to do is this now:

<datepicker-auto ng-model="someDate"></datepicker-auto>