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
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.
element.scope() and element.isolateScope() stops working in "production". In my case, just returned undefined.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>
