Angular-Ui Bootstrap DatePicker Open on focus

Хотя это может показаться простым вопросом, я не могу найти нигде решение.Angular-Ui Bootstrap DatePicker Open on focus

Простой, как это:

<input type="text" datepicker-popup>

Я хочу, что, когда курсор попадает, календарь всплывающее окно автоматически появится, как JQuery-UI DatePicker. Теперь я должен либо предоставить кнопку, либо Alt-down, оба недружелюбные для меня.

Существует атрибут is-open, но я не хочу усложнять то, что помещает переменные в область чего-то, что, вероятно, уже должно быть доступно в качестве конфигурации? : D.

Благодаря

источник

2015-08-25 Kat Lim Ruiz

EDIT:

я, наконец, нашел решение. Это немного сложно, но это работает. Вот директива:

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

И это мнение:

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

Это старшее решение:

Вы можете написать директиву, чтобы изменить значение 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, это решение не работает при отключении данных отладки в угловом режиме. Ответ

источник

2015-08-25 09:39:58 alisabzevari

Я попробую, спасибо !. ... Один недостаток заключается в том, что вы помещаете в область «открытый» флаг, он должен быть массивом для каждого dtp, доступного в ui, поэтому каждый имеет свой собственный флаг. –

@KatLimRuiz Вы были правы. Я не мог найти идеальное решение, но сделал его лучше! – alisabzevari

Фактически это прерывается, если вы отключите данные отладки https://docs.angularjs.org/guide/production#disabling-debug-data 'element.scope()' и 'element.isolateScope()' перестает работать в режиме "production" , В моем случае просто вернул 'undefined'. –

alisabzevari кажется хорошо для меня, но вы могли бы быть лучше всего делать это:

ng-focus='open = true'

я изо всех сил, чтобы обернуть вокруг головы, как именно is-open работает, но я в конечном итоге просто сделать директиву оболочки, делает все типичные настройки для моих datepickers и устанавливает отдельную область для 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>

источник

2015-11-07 22:13:51 nealibob

Angular-Ui Bootstrap DatePicker Open on focus

ответ

Смежные вопросы