Comment formater une date en utilisant ng-model?

J'ai une entrée définie comme

<input class="datepicker" type="text" ng-model="clientForm.birthDate" />

Qui est truqué pour être affiché ailleurs sur la page:

<tr>
    <th>Birth Date</th>
    <td>{{client.birthDate|date:'mediumDate'}}</td>
</tr>

Lorsque la page se charge, la date de naissance est bien formatée comme quelque chose comme Dec 22, 2009. Cependant, quand je regarde à l'intérieur de mon, <input>cela montre Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)comment JS rend les Dateobjets sous forme de chaînes.

Premièrement, comment puis-je dire à Angular d'afficher la date dans le <input>comme quelque chose comme 12/22/2009? Je n'arrive pas à m'appliquer |filtersà l'intérieur de l' ng-modelattribut.

Deuxièmement, dès que je modifie la date, même en la conservant dans son format d'origine, mon autre texte (à l'intérieur du <td>) ne semble plus appliquer le |datefiltre; il change soudainement de format pour correspondre à celui de la zone de texte d'entrée. Comment puis-je lui faire appliquer le |datefiltre à chaque fois que le modèle change?

Questions connexes:

• Comment faire en sorte que ma directive ne se déclenche que sur onchange?
• Comment accéder aux arguments d'une directive?

Utilisez la validation personnalisée des formulaires http://docs.angularjs.org/guide/forms Démo: http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

Directive utilisant des formateurs et des analyseurs et MomentJS )

angModule.directive('moDateInput', function ($window) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moDateInput;
            attrs.$observe('moDateInput', function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var date = moment(viewValue, dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});

Voici une directive angular-datetime très pratique . Vous pouvez l'utiliser comme ceci:

<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate">

Il ajoute également un masque à votre entrée et effectue la validation.

J'ai créé une directive simple pour permettre aux input[type="date"]éléments de formulaire standard de fonctionner correctement avec AngularJS ~ 1.2.16.

Regardez ici: https://github.com/betsol/angular-input-date

Et voici la démo: http://jsfiddle.net/F2LcY/1/

J'utilise jquery datepicker pour sélectionner la date. Ma directive lit la date et la convertit au format de date json (en millisecondes), stocke les ng-modeldonnées tout en affichant la date formatée et inversée si ng-model a une date json (en millisecondes), mon formateur s'affiche dans mon format en tant que jquery datepicker.

Code HTML:

<input type="text" jqdatepicker  ng-model="course.launchDate" required readonly />

Directive angulaire:

myModule.directive('jqdatepicker', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (date) {   
                    var ar=date.split("/");
                    date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]);
                    ngModelCtrl.$setViewValue(date.getTime());            
                    scope.$apply();
                }
            });
            ngModelCtrl.$formatters.unshift(function(v) {
            return $filter('date')(v,'dd/MM/yyyy'); 
            });

        }
    };
});

Puisque vous avez utilisé datepicker comme classe, je suppose que vous utilisez un datepicker Jquery ou quelque chose de similaire.

Il existe un moyen de faire ce que vous prévoyez sans utiliser du tout moment.js, en utilisant uniquement les directives datepicker et angularjs.

J'ai donné un exemple ici dans ce violon

Extraits du violon ici:

1. Datepicker a un format différent et le format angularjs est différent, il faut trouver la correspondance appropriée pour que la date soit présélectionnée dans le contrôle et soit également renseignée dans le champ de saisie pendant que le ng-model est lié. Le format ci-dessous est équivalent au 'mediumDate'format d'AngularJS.

   $(element).find(".datepicker")
             .datepicker({
                dateFormat: 'M d, yy'
             }); 

2. La directive d'entrée de date doit avoir une variable de chaîne provisoire pour représenter la forme de date lisible par l'homme.

3. L'actualisation des différentes sections de la page doit se faire via des événements, tels que $broadcastet $on.

4. L'utilisation d'un filtre pour représenter la date sous une forme lisible par l'homme est également possible dans ng-model, mais avec une variable de modèle temporaire.

   $scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate');

J'utilise la directive suivante qui me rend très heureux et la plupart des utilisateurs! Il utilise moment pour l'analyse et le formatage. Cela ressemble un peu à celui de SunnyShah, mentionné plus tôt.

angular.module('app.directives')

.directive('appDatetime', function ($window) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            var moment = $window.moment;

            ngModel.$formatters.push(formatter);
            ngModel.$parsers.push(parser);

            element.on('change', function (e) {
                var element = e.target;
                element.value = formatter(ngModel.$modelValue);
            });

            function parser(value) {
                var m = moment(value);
                var valid = m.isValid();
                ngModel.$setValidity('datetime', valid);
                if (valid) return m.valueOf();
                else return value;
            }

            function formatter(value) {
                var m = moment(value);
                var valid = m.isValid();
                if (valid) return m.format("LLLL");
                else return value;

            }

        } //link
    };

}); //appDatetime

Dans mon formulaire, je l'utilise comme ceci:

<label>begin: <input type="text" ng-model="doc.begin" app-datetime required /></label>
<label>end: <input type="text" ng-model="doc.end" app-datetime required /></label>

Cela liera un horodatage (millisecondes depuis 1970) à doc.beginet doc.end.

Dans Angular2 + pour toute personne intéressée:

<input type="text" placeholder="My Date" [ngModel]="myDate | date: 'longDate'">

avec le type de filtres dans DatePipe Angular.

Je préfère que le serveur renvoie la date sans modification, et que javascript fasse le massage de la vue. Mon API renvoie «MM / JJ / AAAA hh: mm: ss» de SQL Server.

Ressource

angular.module('myApp').factory('myResource',
    function($resource) {
        return $resource('api/myRestEndpoint/', null,
        {
            'GET': { method: 'GET' },
            'QUERY': { method: 'GET', isArray: true },
            'POST': { method: 'POST' },
            'PUT': { method: 'PUT' },
            'DELETE': { method: 'DELETE' }
        });
    }
);

Manette

var getHttpJson = function () {
    return myResource.GET().$promise.then(
        function (response) {

            if (response.myDateExample) {
                response.myDateExample = $filter('date')(new Date(response.myDateExample), 'M/d/yyyy');
            };

            $scope.myModel= response;
        },
        function (response) {
            console.log(response.data);
        }
    );
};

Directive de validation myDate

angular.module('myApp').directive('myDate',
    function($window) {
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ngModel) {

                var moment = $window.moment;

                var acceptableFormats = ['M/D/YYYY', 'M-D-YYYY'];

                function isDate(value) {

                    var m = moment(value, acceptableFormats, true);

                    var isValid = m.isValid();

                    //console.log(value);
                    //console.log(isValid);

                    return isValid;

                };

                ngModel.$parsers.push(function(value) {

                    if (!value || value.length === 0) {
                         return value;
                    };

                    if (isDate(value)) {
                        ngModel.$setValidity('myDate', true);
                    } else {
                        ngModel.$setValidity('myDate', false);
                    }

                    return value;

                });

            }
        }
    }
);

HTML

<div class="form-group">
    <label for="myDateExample">My Date Example</label>
    <input id="myDateExample"
           name="myDateExample"
           class="form-control"
           required=""
           my-date
           maxlength="50"
           ng-model="myModel.myDateExample"
           type="text" />
    <div ng-messages="myForm.myDateExample.$error" ng-if="myForm.$submitted || myForm.myDateExample.$touched" class="errors">
        <div ng-messages-include="template/validation/messages.html"></div>
    </div>
</div>

template / validation / messages.html

<div ng-message="required">Required Field</div>
<div ng-message="number">Must be a number</div>
<div ng-message="email">Must be a valid email address</div>
<div ng-message="minlength">The data entered is too short</div>
<div ng-message="maxlength">The data entered is too long</div>
<div ng-message="myDate">Must be a valid date</div>

Angularjs ui bootstrap, vous pouvez utiliser angularjs ui bootstrap, il fournit également la validation de la date

<input type="text"  class="form-control" 
datepicker-popup="{{format}}" ng-model="dt" is-open="opened" 
min-date="minDate" max-date="'2015-06-22'"  datepickeroptions="dateOptions"
date-disabled="disabled(date, mode)" ng-required="true"> 

dans le contrôleur peut spécifier le format que vous souhaitez afficher la date comme datefilter

$ scope.formats = ['jj-MMMM-aaaa', 'aaaa / MM / jj', 'jj.MM.yyyy', 'shortDate'];