AngularJs BootstrapUI Datepicker de validation

J'ai besoin de valider la date de la datepicker et limite aussi le nombre d'années (éviter 15-05-9999 par exemple).

C'est mon code HTML:

 <p class="input-group">
                        <input type="text" name="raisedOnDate" class="form-control" ng-model="date" ng-disabled="!viewSearchEvent.raisedOnActive"
                               datepicker-popup="{{format}}" is-open="opened1" datepicker-options="dateOptions" date-validator required />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open($event,'on')"><i class="glyphicon glyphicon-calendar"></i></button>
                        </span>
                    <p ng-show="!searchEventsForm.$valid" style="color: red;">Date is invalid!</p>
                    <p ng-show="searchEventsForm.$valid" style="color: green;">Date is valid!</p>

C'est à l'intérieur d'un <form name="searchEventsForm" role="form" class="form-horizontal" novalidate>.

J'ai fait cette directive afin de valider la date, type:

app.directive('dateValidator', function() {
return {
    require: 'ngModel',
    link: function (scope, elem, attr, ngModel) {
        function validate(value) {

            var d = Date.parse(value);

            //it is a date
            if (isNaN(d)) { //d.valueOf() could also work
                ngModel.$setValidity('valid', false);
            } else {
                ngModel.$setValidity('valid', true);
            }
        }

        scope.$watch(function () {
            return ngModel.$viewValue;
        }, validate);
    }
};

});

Mais, je peux entrer les dates comme 25-05-999999999, et qui n'est pas l'idée.

J'ai réussi à le faire fonctionner, donc si c'est une date qu'il affiche un message disant "Date valide" et si ce n'est "la date n'est pas valide".

Mais je suis coincé là-bas.

Des idées sur comment puis-je mettre de l'année de la limite et de la limite de caractères et de le faire fonctionner?

J'ai déjà essayé avec max-date, max, et d'autres.

Si vous avez besoin de plus d'info il suffit de demander, je ne sais pas si c'est assez clair ou bien expliqué.
Merci pour l'aide! 😉

J'ai parcouru Google et stackoverflow et ne trouve rien qui font de ce travail. Je suis toujours à la recherche tho.
"angulaire" bootstrap "datepicker de validation" me donne beaucoup de résultats, certains d'entre eux assez pertinentes.
Essayé, n'a pas fonctionné. Je suis encore à essayer effectivement, la modification et ainsi de suite.
essayez le angulaires-sangle datepicker, qui vous permet de créer un maximum de valeur et un min-valeur etc
Je vais essayer, je vous laisser savoir! Merci!!!! 😀

OriginalL'auteur SrAxi | 2014-06-25

7

Pourquoi ne pas vous utiliser ng-modèle?? au lieu de faire une nouvelle directive.

Lire plus à ce sujet ici NG-MODÈLE DOCS
```
 ng-pattern="/^(\d{4})-(\d{2})-(\d{2})$/"
```
Prendre un coup d'oeil à ce violon avec une meilleure solution

valider datepicker à l'aide de ng-modèle

Nice. Je vais vous donner un +1. Le morceau de travail est terminé. Mais j'ai eu un coup d'oeil à ng-modèle et offre une bonne façon d'aborder la question. Merci.
ng-modèle ne fonctionne pas avec datepicker parce que le ngModel a été modifié en date objet au lieu de string
Ceux qui sont encore la lecture de ce obsolètes fil devrait savoir que le composant datepicker a maintenant intégré dans le processus de validation. Vue sur les docs, gardez un œil sur les "formats" de la variable

OriginalL'auteur ppollono

utilisé ceci: maxlength="10" sur le code html pour limiter les caractères.

et c'est pour valider le format de la date est correcte (éviter 1/1/1, ou 11/06/201):

MyDirective.directive('dateValidator', function() {
     return {
         require: 'ngModel',
         link: function (scope, elem, attr, ngModel) {
             function validate(value) {
                 if (value !== undefined && value != null) {
                     ngModel.$setValidity('badDate', true);
                     if (value instanceof Date) {
                         var d = Date.parse(value);
                         //it is a date
                         if (isNaN(d)) {
                             ngModel.$setValidity('badDate', false);
                         }
                     } else {
                         var myPattern = new RegExp(/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/);
                         if (value !='' && !myPattern.test(value)) {
                             ngModel.$setValidity('badDate', false);
                         }
                     }
                 }
             }

             scope.$watch(function () {
                 return ngModel.$viewValue;
             }, validate);
         }
     };
});

N'a toujours pas réussi à résoudre un min date et max date, mais n'est pas urgent.
J'espère que ça peut aider les gens dans le futur.

C'est quelque chose de plus facile à faire avec la construction dans le, angulaire directives

OriginalL'auteur SrAxi

-1

Votre solution utilise '.$watch' à faire ce ngModel "$analyseurs' et '$formateurs " a été construite à faire. Jetez un oeil ici:
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

il n'y a pas de ngModel.$analyser
waouh, vous avez raison ... édité à referrence les bonnes méthodes.

OriginalL'auteur gkl

Vous devez vous connecter pour publier un commentaire.