AngularJS 1.3 Grundkurs

Datum und Uhrzeit ausgeben und formatieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Anwendung des Date-Filters gibt eine Datums- bzw. Uhrzeitangabe aus und ermöglicht es, diese auf verschiedene Arten zu formatieren.
04:39

Transkript

In den kommenden Minuten möchte ich euch sehr gerne einmal den Date-Filter etwas näher bringen. Der Date-Filter ermöglicht es euch, ein Datumsobjekt zu filtern, dabei kann das Datumsobjekt entweder in Form eines echten Datumsobjektes sein, von Type-Date, oder natürlich auch ein Streaming, in dem eine Datumsinformation enthalten ist, oder ein Timestamp. In meinem Beispiel habe ich hier ein Timestamp für mich vorbereitet, der Timestamp befindet sich bei mir im Scope, da haben wir ihn. Das, was ich jetzt möchte, ist den Datumsfilter darauf anwenden, und der Datumsfilter muss so definiert sein, dass ich hingehe und zunächst einmal mit Date-in Filter inizialisiere, und als Parameter dann bestimme, wie ich das Datum hier ausgeben lassen möchte. Das, was ich möchte, ist zum Beispiel an dieser Stelle, das ich erst die Tagesinformation bekomme, gefolgt von der Monatsinformation, und dann das Ganze gefolgt von dem Jahr. Gucke ich mir das Ganze dann jetzt an, sehen wir dann wunderbar, dass wir den 29.10.2010 hier als Datum haben. Ich bin auch in der Lage jetzt, diesen Filter zu erweitern, so kann ich zum Beispiel hier noch zusätzlich eine Zeitinformation hiermit übergeben, in dem Moment, wo ich zweimal das kleine "h" verwende, ist das eine Zeitangabe von ein Uhr bis zwölf Uhr AM/PM, würde ich das "h" groß definieren, wäre es dann entsprechend eine Uhrzeit von null bis drei undzwanzig Uhr, zusätzlich zwei kleine "mm", die stehen für die Minute und zu guter Letzt die Sekunden. Teste ich das nur nochmal, sehe ich dann entsprechend eine vollkommen saubere Formatierung nach dem Datum. Diese Pattern, wie ich sie jetzt hier habe, muss ich mir aber nicht zwangsläufig merken. Es gibt auch die Möglichkeit, dass ich zum Beispiel hier als Parameter einfach definieren kann, dass ich so was haben möchte, wie ein "full Date". Das "full Date" ist als Konstant konstant hinterlegt, und macht dann entsprechend hier die Darstellung des Datumsobjektes mit dem Wochentag, dem Monat, dem Tag, sowie dem Jahr. Und ich habe es mir einfach mal erlaubt, alle Filtertypen, die ich verwenden kann, hier aufzulisten, und was ich nun möchte, ist mal schnell einen Repeater zu erzeugen, mit ng-repeat, Type in date-Types, und möchte nun diesen Ausdruck mir schnappen, und an dieser Stelle möchte ich jetzt sagen: "type", um zu definieren, welchen Typ ich mir gerade anschaue, dann den Timestamp filtern lassen, und diesmal übergebe ich den Wert hier nicht als drin, sondern ebenfalls als "type". So, schauen wir uns das Ganze jetzt mal an! Sehen wir dann, dass ich die unterschiedlichen Typen hier kennenlerne, medium zeigt zum Beispiel verkürzt den Monat an, short zeigt lediglich ganz ganz kurz das Datum an, anschließend die Uhrzeit AM/PM, full so wie wir es gerade gesehen haben, long Date das Datum in langer Form, medium, short, medium Time unknown. Was aber jetzt viele zurecht an dieser Stelle sagen werden, ist, dass es ja etwas blöd ist, dass in meiner deutschen Anwendung alles amerikanisch hier formatiert wurde. Nun, in dieser Konstellation gibt es die Möglichkeit, dass ich jetzt von Angular eine Internationalisierungsdatei einfach mit initialisiere, und schon wieder das Problem erledigt. Hier kopiere ich nun erstmal die Internationalisierungsdatei, dann schnappe ich mir das jetzt hier, gehe ich in die "lib", kopiere ich das hier rein. Die Internationalisierungsdatei gibt es für na zu jeder denklicher Sprache momentan. Und das, was ihr natürlich machen könnt, ist diese Internationalisierungsdatei euch von den Angular Seiten selber herunterladen. Und hier seht ihr dann, dass einfach an dieser Stelle die Übersetzung, hier von AM/PM, von den Tagen, von den Monaten, entsprechend in Typen sind. Das ist im Grunde genommen auch die einzige Internationalisierungsdatei, die ihr verwenden könnt, damit dann im Anschluss auch zum Beispiel, wenn ihr das Ganze nach Zahlenfiltern mal darstellen lassen möchtet, sauber mit Komma und Punkt dann funktioniert, denn denkt dann im Amerikanischen wird anstelle eines Kommas ein Punkt verwendet, um die Zahlenwerte zu trennen. Jetzt möchte ich euch aber zeigen, dass nachdem ich die Internationalisierungsdatei hier in meine "lib" gepackt habe, ich nur noch dafür sorgen muss, dass ich diese auch lade. Und teste ich nur nochmal die gleiche Anwendung, seht ihr, dass ich dann sauber die ganze Formatierung auf Deutsch habe, womit ich dann hier wunderbar den Datumsfilter verwenden kann. In diesem Video haben wir also gemeinsam gelernt, wie wir in der Lage sind, den Datumsfilter zu nutzen.

AngularJS 1.3 Grundkurs

Legen Sie mit AngularJS moderne, anspruchsvolle Webprojekte auf der Basis von HTML, CSS und JavaScript an.

4 Std. 15 min (74 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
AngularJS AngularJS 1.3
Exklusiv für Abo-Kunden
Erscheinungsdatum:19.11.2014

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!