Kat Lim Ruiz Kat Lim Ruiz - 6 months ago 274
AngularJS Question

Angular-Ui Bootstrap DatePicker Open on focus

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

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");
        });
      });
    }
  };
}]);

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.

Comments