Angular UI Bootstrap Datepicker: support ng-readonly
Angulaire UI Bootstrap datepicker n'a pas les honneurs ng-attribut lecture seule.
Si ng-readonly expression est true, le champ de saisie de texte est grisé et ne peut pas être modifié, mais le datepicker calendrier pop-up s'ouvre, permettant de modifier les champs du formulaire.
Jusqu'à présent j'ai essayé les 3 méthodes (voir http://plnkr.co/edit/KHrbbI6W1pWG5ewSsE9r?p=preview), qui sont tous deux plus à du bidouillage et vilaine:
- La désactivation de toutes les dates de datepicker si elle doit être en lecture seule.
<input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" date-disabled="disabled(date, mode)" />
dans le fichier html et
$scope.$watch('ro', function(ro) { $scope.dt = new Date($scope.dt); //force datepicker div refresh }); $scope.disabled = function(date, mode) { return $scope.ro; };
dans le contrôleur.
- Ne permettant pas datepicker div popup pop up.
<input type="text" datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" is-open="opened" />
dans le fichier html et
$scope.$watch('opened', function(v1, v2, v3) { if ($scope.ro && v1) { $timeout(function() { $scope.opened = false; }); } });
dans le contrôleur. Clignotant datepicker l'air terrible.
- Remplacement datepicker de la saisie de texte avec un autre readonly champ de saisie sans datepicker attaché.
<datepicker-ro-fix datepicker-popup="dd.MM.yyyy" ng-model="dt" ng-readonly="ro" />
dans le fichier html et
m.directive('datepickerRoFix', function() { return { restrict: 'E', require: 'ngModel', scope: { ngModel: '=', ngReadonly: '=', }, template: '<span>' + '<input ng-hide="ngReadonly" type="text" datepicker-popup="dd.MM.yyyy" ng-model="ngModel" />' + '<input ng-show="ngReadonly" type="text" readonly="true" value="{{ ngModel | date:\'dd.MM.yyyy\'}}" />' + '</span>', }; });
dans le fichier js. Cela semble être la meilleure solution jusqu'à présent, mais l'inconvénient est que maintenant il y a deux éléments d'entrée au lieu d'un seul, les deux ont quelques codé en dur propriétés.
Première et de la deuxième approches nécessitent moi d'ajouter un tas de code dans le formulaire de contrôleur pour chaque date, champ de saisie, la Troisième est beaucoup plus difficile à personnaliser.
Je suis nouveau sur angulaire et devrait être en manque de quelque chose.
Est-il une meilleure façon de créer des champs de saisie avec datepicker vraiment en lecture seule?
source d'informationauteur Vasily Redkin
Vous devez vous connecter pour publier un commentaire.
Votre troisième approche est très agréable, à mon humble avis.
Étant donné que le datepicker lui-même n'est évidemment pas en charge la propriété readonly, je ne vois pas une autre façon de comment faire en lecture seule (et vous avez même créé une directive pour elle)
Votre deuxième approche aboutit parfois à un mineur de scintillement lors d'un clic sur l'entrée (est-ce juste moi?)
De personnalisation, pourriez-vous expliquer pourquoi il est difficile de le faire faire? Vous auriez des tuyaux tous les attributs possibles de la directive d'origine par le biais de votre directive, je suppose?
ng-disabled="true"
a fonctionné pour moi.
Angularjs: 1.2.9 et
ui-bootstrap: 0.8.0
Malheureusement je n'ai pas de réputation assez pour faire des commentaires sur l'original de la réponse
Utilisation
ng-disabled="true"