Wie formatiere ich ein Datum mit ng-model?

Ich habe eine Eingabe definiert als

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

Welches ist manipuliert, um an anderer Stelle auf der Seite angezeigt zu werden:

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

Wenn die Seite geladen wird, wird das Geburtsdatum so gut wie formatiert Dec 22, 2009. Wenn ich jedoch in mein Bild schaue <input>, wird angezeigt, Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)wie JS DateObjekte als Zeichenfolgen rendert .

Erstens, wie kann ich Angular anweisen, das Datum in <input>so etwas wie anzuzeigen 12/22/2009? Ich kann mich nicht |filtersinnerhalb des ng-modelAttributs bewerben .

Zweitens <td>scheint mein anderer Text (innerhalb des ) den |dateFilter nicht mehr anzuwenden , sobald ich das Datum bearbeite und es sogar im Originalformat behalte. Es ändert plötzlich das Format, um es an das Eingabetextfeld anzupassen. Wie kann ich den |dateFilter bei jedem Modellwechsel anwenden ?

Verwandte Fragen:

• Wie kann ich meine Anweisung dazu bringen, nur bei einem Wechsel zu feuern?
• Wie kann man auf Argumente in einer Direktive zugreifen?

Verwenden Sie die benutzerdefinierte Validierung von Formularen http://docs.angularjs.org/guide/forms Demo: http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

Direktive mit Formatierern und Parsern und 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() : "";
            });
        }
    };
});

Hier ist eine sehr praktische Direktive Winkel-Datum / Uhrzeit . Sie können es so verwenden:

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

Außerdem wird Ihrer Eingabe eine Maske hinzugefügt und eine Validierung durchgeführt.

Ich habe eine einfache Anweisung erstellt, damit Standardformularelemente input[type="date"]mit AngularJS ~ 1.2.16 ordnungsgemäß funktionieren.

Schauen Sie hier: https://github.com/betsol/angular-input-date

Und hier ist die Demo: http://jsfiddle.net/F2LcY/1/

Ich verwende jquery datepicker, um das Datum auszuwählen. Meine Direktive liest das Datum und konvertiert es in das json-Datumsformat (in Millisekunden), speichert es in ng-modelDaten, während das formatierte Datum angezeigt wird.

HTML Quelltext:

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

Winkelrichtlinie:

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'); 
            });

        }
    };
});

Da Sie Datepicker als Klasse verwendet haben, gehe ich davon aus, dass Sie einen Jquery-Datepicker oder ähnliches verwenden.

Es gibt eine Möglichkeit, das zu tun, was Sie beabsichtigen, ohne moment.js zu verwenden, indem Sie nur die Direktiven datepicker und anglejs verwenden.

Ich habe hier in dieser Geige ein Beispiel gegeben

Auszüge aus der Geige hier:

1. Datepicker hat ein anderes Format und AngularJS-Format ist unterschiedlich. Sie müssen die entsprechende Übereinstimmung finden, damit das Datum im Steuerelement vorausgewählt und auch im Eingabefeld ausgefüllt wird, während das ng-Modell gebunden ist. Das folgende Format entspricht dem 'mediumDate'Format von AngularJS.

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

2. Die Datumseingabeanweisung muss eine vorläufige Zeichenfolgenvariable enthalten, um die vom Menschen lesbare Datumsform darzustellen.

3. Das Aktualisieren über verschiedene Seitenabschnitte sollte über Ereignisse wie $broadcastund erfolgen $on.

4. Die Verwendung eines Filters zur Darstellung des Datums in lesbarer Form ist auch im ng-Modell möglich, jedoch mit einer temporären Modellvariablen.

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

Ich verwende die folgende Anweisung, die mich und die meisten Benutzer sehr glücklich macht! Es verwendet Moment zum Parsen und Formatieren. Es sieht ein bisschen aus wie das von SunnyShah, das bereits erwähnt wurde.

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

In meiner Form benutze ich es so:

<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>

Dadurch wird ein Zeitstempel (Millisekunden seit 1970) an doc.beginund gebunden doc.end.

In Angular2 + für alle Interessierten:

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

mit Filtertyp in DatePipe Angular.

Ich möchte, dass der Server das Datum ohne Änderung zurückgibt und Javascript die Ansicht massiert. Meine API gibt "MM / TT / JJJJ hh: mm: ss" von SQL Server zurück.

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' }
        });
    }
);

Regler

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

myDate-Validierungsrichtlinie

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 Sie können AngularJs UI-Bootstrap verwenden. Es bietet auch eine Datumsüberprüfung

<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"> 

In der Steuerung können Sie festlegen, in welchem ​​Format das Datum als Datumsfilter angezeigt werden soll.

$ scope.formats = ['TT-MMMM-JJJJ', 'JJJJ / MM / TT', 'TT.MM.JJJJ', 'Kurzdatum'];