Geek Answers Handbook

Angular-Ui Bootstrap DatePicker Open on focus

Although this may seem like a simple question, I cannot find a solution.

Just like this:

<input type="text" datepicker-popup>

I want the cursor popup to automatically display when the cursor enters, e.g. jquery-ui datepicker. Now I must either provide a button or Alt-down, both unfriendly to me.

There is an is-open attribute, but I don’t want to complicate what puts the variables in the scope of something that should probably already be available as a configuration?.: D

thanks

+4
source share
2 answers

EDIT:

I finally found a solution. It is a bit complicated, 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 view:

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

This is an old solution:

, is-open, :

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

:

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

, open is-open="open" . , . , .

: Akos-lukacs, angular.

+6

alisabzevari , , :

ng-focus='open = true'

, is-open, , is-open:

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: '='
        }
    };
});

, , :

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

More articles:


All Articles