Format Datum und Uhrzeit in AngularJS

123

Wie zeige ich Datum und Uhrzeit in AngularJS richtig an?

Die folgende Ausgabe zeigt sowohl die Eingabe als auch die Ausgabe mit und ohne AngularJS-Datumsfilter:

In: {{v.Dt}}  
AngularJS: {{v.Dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

Dies druckt:

In: 2012-10-16T17:57:28.556094Z 
AngularJS: 2012-10-16T17:57:28.556094Z

Das gewünschte Anzeigeformat ist 2010-10-28 23:40:23 0400oder2010-10-28 23:40:23 EST

bsr
quelle

Antworten:

63

v.Dt ist wahrscheinlich kein Date () -Objekt.

Siehe http://jsfiddle.net/southerd/xG2t8/

aber in Ihrem Controller:

scope.v.Dt = Date.parse(scope.v.Dt);
David Souther
quelle
David in meinem Fall Datum wird im Format TT / MM / JJJJ in der Datenbank gespeichert. Ich konvertiere, dass ich es Benutzer DD.MM.YYYY Format in Textfeld zeigen oder Benutzereingaben in diesem Format nehmen und das gleiche wird in meinem Modell aktualisiert. wie man das ändert, bevor man es an DB übergibt. Wie soll ich
mich
120

Der Code sollte funktionieren , wie Sie es sehen haben diese Geige .

Sie müssen jedoch sicherstellen, dass v.Dtes sich um ein geeignetes Datumsobjekt handelt , damit es funktioniert.

{{dt | date:'yyyy-MM-dd HH:mm:ss Z'}}

oder wenn dateFormat im Gültigkeitsbereich als dateFormat = 'JJJJ-MM-TT HH: mm: ss Z' definiert ist:

{{dt | date:dateFormat }}
Gloopy
quelle
Da das Format eine kosmetische Option ist, ist es im Allgemeinen besser, dies direkt in der Ansicht zu tun.
Puce
thnkx..super ans. Ist es möglich, die Zeit im 12-Stunden-Format anzuzeigen?
Vishnu Prasad
dt kann auch ein Unix-Zeitstempel im Integer-Format sein
tom10271
Es ist nicht erforderlich, ein DateTyp für eine Variable zu sein. Zeitstempel lange funktioniert auch gut
Vlad
59

Ich weiß, dass dies ein alter Gegenstand ist, dachte aber, ich würde eine andere Option in Betracht ziehen.

Da die ursprüngliche Zeichenfolge den Demarker "T" nicht enthält, erkennt die Standardimplementierung in Angular ihn nicht als Datum. Sie können es mit einem neuen Datum erzwingen, aber das ist ein bisschen schmerzhaft für ein Array. Da Sie Filter zusammen leiten können, können Sie möglicherweise einen Filter verwenden, um Ihre Eingabe in ein Datum zu konvertieren und dann den Filter date: auf das konvertierte Datum anzuwenden. Erstellen Sie einen neuen benutzerdefinierten Filter wie folgt:

app
.filter("asDate", function () {
    return function (input) {
        return new Date(input);
    }
});

Dann können Sie in Ihrem Markup die Filter zusammen leiten:

{{item.myDateTimeString | asDate | date:'shortDate'}}
Jim Wooley
quelle
Ja, zuverlässiger und effizienter. Danke fürs Teilen
azhar_SE_nextbridge
56

Sie können den 'Datums'-Filter folgendermaßen erhalten:

var today = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss Z');

Dadurch erhalten Sie das heutige Datum in dem von Ihnen gewünschten Format.

CodeOverRide
quelle
lol ja, Leandro. Ich weiß nicht, wie es dazu gekommen ist. Ich denke, ich dachte 'verwenden'.
CodeOverRide
49

Hier ist ein Filter , der eine Datumszeichenfolge ODER ein Javascript-Date () -Objekt verwendet. Es verwendet Moment.js und kann jede Moment.js- Transformationsfunktion anwenden , z. B. die beliebte Funktion 'fromNow'.

angular.module('myModule').filter('moment', function () {
  return function (input, momentFn /*, param1, param2, ...param n */) {
    var args = Array.prototype.slice.call(arguments, 2),
        momentObj = moment(input);
    return momentObj[momentFn].apply(momentObj, args);
  };
});

So...

{{ anyDateObjectOrString | moment: 'format': 'MMM DD, YYYY' }}

würde den 11. November 2014 anzeigen

{{ anyDateObjectOrString | moment: 'fromNow' }}

würde anzeigen 10 Minuten

Wenn Sie mehrere Momentfunktionen aufrufen müssen, können Sie sie verketten. Dies konvertiert in UTC und formatiert dann ...

{{ someDate | moment: 'utc' | moment: 'format': 'MMM DD, YYYY' }}

https://gist.github.com/cmmartin/341b017194bac09ffa1a

Charlie Martin
quelle
Es ist eine mächtigere Methode ! Vielen Dank!
Modder
2
Dies ist brillant und kann auch mit Moment Timezone kombiniert werden. zB: {{foo.created_at | Moment: 'tz': 'America / New_York' | Moment: 'Format': 'h: mm a z'}}
Dave Collins
22

Hier einige beliebte Beispiele:

<div>{{myDate | date:'M/d/yyyy'}}</div> 04.07.2014

<div>{{myDate | date:'yyyy-MM-dd'}}</div> 2014-07-04

<div>{{myDate | date:'M/d/yyyy HH:mm:ss'}}</div> 04.07.2014 12:01:59

James Lawruk
quelle
einfach, elegant und genau das, was gefragt wurde
Ignotus
15

Haben Sie den Abschnitt Schreibanweisungen (Kurzversion) der Dokumentation gesehen ?

HTML

<div ng-controller="Ctrl2">
      Date format: <input ng-model="format"> <hr/>
      Current time is: <span my-current-time="format"></span>
</div> 

JS

function Ctrl2($scope) {
  $scope.format = 'M/d/yy h:mm:ss a';
}
Verfolgungsjagd
quelle
2
Ich denke, Ihr Kommentar ist sehr gültig. Das Erlernen von Filtern ist ein wesentlicher Bestandteil von AngularJS. Es ist wirklich nicht so schwierig.
Spock
6

Innerhalb eines Controllers kann das Format durch Einfügen von $ filter gefiltert werden.

var date = $filter('date')(new Date(),'MMM dd, yyyy');
Tjs
quelle
5

Wenn Sie wie "30.01.2017 16:31:20" ausgeben möchten, folgen Sie einfach dem einfachen Schritt

Schritt 1 - Deklarieren Sie die folgende Variable in js controller

$scope.current_time = new Date();

step2- Anzeige in HTML-Seite wie

{{current_time | Datum: 'mittel'}}

Shani Singh
quelle
5

Wir können das Datum auf der Ansichtsseite sehr einfach in einem Winkel formatieren. Bitte überprüfen Sie das folgende Beispiel:

{{dt | Datum: "TT-MM-JJJJ"}}

Rajat-Systematix
quelle
3

Sie können momentjsden Datums- / Zeitfilter in anglejs implementieren. Beispielsweise:

angular.module('myApp')
 .filter('formatDateTime', function ($filter) {
    return function (date, format) {
        if (date) {
            return moment(Number(date)).format(format || "DD/MM/YYYY h:mm A");
        }
        else
            return "";
    };
});

Wo Datum im Zeitstempelformat ist.

Rubi saini
quelle
1

In $filterAbhängigkeit in der Steuerung.

var formatted_datetime = $filter('date')(variable_Containing_time,'yyyy-MM-dd HH:mm:ss Z')
Aniket B.
quelle
2
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage in Zukunft für Leser beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch, Ihren Code nicht mit erklärenden Kommentaren zu überfüllen. Dies verringert die Lesbarkeit sowohl des Codes als auch der Erklärungen!
Kayess
0

Ich würde Ihnen empfehlen, moment.js zu verwenden. Es hat eine gute Unterstützung für die Datumsformatierung nach Gebietsschemas.

Erstellen Sie einen Filter, der intern die moment.js-Methode zum Formatieren des Datums verwendet.

Rahul Tokase
quelle