Formatieren Sie Datum und Uhrzeit in AngularJS

Lesezeit: 4 Minuten

Benutzer-Avatar
bsr

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

Das 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 0400 oder 2010-10-28 23:40:23 EST

Benutzer-Avatar
Schmierig

Ihr Code sollte so funktionieren, wie Sie ihn sehen diese Geige.

Sie müssen sicherstellen, dass Ihre v.Dt ist ein richtiges Datum Objekt, damit es funktioniert.

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

oder wenn dateFormat im Gültigkeitsbereich als dateFormat=”yyyy-MM-dd HH:mm:ss Z” definiert ist:

{{dt | date:dateFormat }}

  • Da das Format eine kosmetische Option ist, ist es im Allgemeinen besser, dies direkt in der Ansicht zu tun.

    – Puce

    1. Juni 2015 um 14:30 Uhr

  • thnkx..super ans. Ist es möglich, die Zeit im 12-Stunden-Format anzuzeigen?

    – Vishnu Prasad

    24. Juli 2015 um 6:35 Uhr

  • dt kann auch ein Unix-Zeitstempel im Integer-Format sein

    – tom10271

    18. August 2015 um 1:39 Uhr


  • es muss nicht a sein Date Typ für Variable. Timestamp long funktioniert auch gut

    – Vlad

    17. Dezember 2017 um 18:35 Uhr

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

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

aber in deinem Controller:

scope.v.Dt = Date.parse(scope.v.Dt);

  • Das Datum von David wird in meinem Fall im Format TT/MM/JJJJ in der Datenbank gespeichert. Ich konvertiere, dass ich es dem Benutzer im TT.MM.JJJJ-Format im Textfeld zeige, oder nehme Benutzereingaben in diesem Format entgegen und dasselbe wird in meinem Modell aktualisiert. wie man das ändert, bevor man es an die DB weitergibt. wie soll ich mich ändern

    – Yogesh

    9. März 2016 um 19:34 Uhr

Benutzer-Avatar
Jim Wooley

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

Da die ursprüngliche Zeichenfolge das Trennzeichen „T“ nicht enthält, erkennt die Standardimplementierung in Angular es nicht als Datum. Sie können es mit new Date erzwingen, aber das ist ein bisschen mühsam für ein Array. Da Sie Filter zusammenfügen können, können Sie möglicherweise einen Filter verwenden, um Ihre Eingabe in ein Datum umzuwandeln, und dann den Datumsfilter auf das umgewandelte Datum anwenden. Erstellen Sie wie folgt einen neuen benutzerdefinierten Filter:

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

Dann können Sie in Ihrem Markup die Filter zusammenfügen:

{{item.myDateTimeString | asDate | date:'shortDate'}}

  • Ja, zuverlässiger und effizienter. Danke fürs Teilen

    – azhar_SE_nextbridge

    26. Februar 2016 um 22:11 Uhr

Benutzer-Avatar
CodeOverRide

Sie können den ‘date’-Filter wie folgt erhalten:

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

Dadurch erhalten Sie das heutige Datum im gewünschten Format.

Benutzer-Avatar
Charly Martin

Hier ist ein Filter das wird eine Datumszeichenfolge ODER ein Javascript-Date()-Objekt annehmen. Es verwendet Moment.js und kann jede anwenden Moment.js Transformationsfunktion, wie die beliebte ‘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' }}

anzeigen würde 11. November 2014

{{ anyDateObjectOrString | moment: 'fromNow' }}

anzeigen würde vor 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

  • Es ist mehr mächtige Methode! Vielen Dank!

    – Modder

    15. Juni 2015 um 11:26 Uhr

  • Das ist genial und kann auch mit Moment Timezone kombiniert werden. zB: {{foo.created_at | moment: ‘tz’: ‘Amerika/New_York’ | moment: ‘format’: ‘h:mm a z’}}

    – David Collins

    17. Oktober 2016 um 17:17 Uhr

Benutzer-Avatar
James Lawruk

Hier sind ein paar beliebte Beispiele:

<div>{{myDate | date:'M/d/yyyy'}}</div> 4.7.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

  • Es ist mehr mächtige Methode! Vielen Dank!

    – Modder

    15. Juni 2015 um 11:26 Uhr

  • Das ist genial und kann auch mit Moment Timezone kombiniert werden. zB: {{foo.created_at | moment: ‘tz’: ‘Amerika/New_York’ | moment: ‘format’: ‘h:mm a z’}}

    – David Collins

    17. Oktober 2016 um 17:17 Uhr

Benutzer-Avatar
Verfolgungsjagd

Hast du den … gesehen Schreibanweisungen (Kurzversion) Abschnitt der Dokumentation?

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

  • Ich finde deinen Kommentar sehr zutreffend. Das Erlernen von Filtern ist ein wesentlicher Bestandteil von AngularJS. Es ist wirklich nicht so schwierig.

    – Spock

    24. November 2013 um 15:01 Uhr


1245970cookie-checkFormatieren Sie Datum und Uhrzeit in AngularJS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy