smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

JavaScript: Date als formatierten String ausgeben

4. Februar 2013
Stephan
JavaScript: Date als formatierten String ausgeben

Für die Ausgabe eines Date-Objekts als String gibt es in in JavaScript einige Funktionen, die die Date-Klasse bereitstellt.

Beispielsweise gibt es die standardmäßige toString-Funktion, aber auch individuelle Funktionen, wie z.B. toLocaleDateString.

Leider gibt es aber keine Funktion, der man einfach das Format für die Ausgabe übergeben kann. So brauchte ich vor kurzem für eines meiner Projekte z.B. die Ausgabe des Datums im Format yyyy-mm-dd.

Im Folgenden zeige ich euch, wie ihr eine eigene JavaScript-Funktion schreiben könnt, um euer Date-Objekt in einem solchen Format ausgeben zu lassen.

Funktion erstellen

Unsere Funktion soll nichts weiter machen, als für ein übergebenes Date-Objekt einen String zurückzuliefern. Der String soll dabei das Datum im Format yyyy-mm-dd beinhalten/darstellen.

Hier nun die Funktion:

function getDateAsString(date)
{
    var year = date.getFullYear();
    var month = '0' + (date.getMonth() + 1);
    month = month.slice(-2, (month.length - 2) + 3);
    var day = '0' + date.getDate();
    day = day.slice(-2, (day.length - 2) + 3);

    return year + '-' + month + '-' + day;
}

Kurze Erklärung zum Code:

Zeile 3
Wir weisen hier der Variable year das Jahr im Format yyyy zu.

Zeile 4
Als erstes lassen wir uns hier den Monat zurückgeben. Da die Date-Klasse die Monate von 0 bis 11 interpretiert, müssen wir den zurückgegebenen Monat inkrementieren (1 hinzuaddieren). Anschließend fügen wir vorne noch eine 0 an.

Zeile 5
Diese Zeile sieht vielleicht etwas verwirrend aus. Im Prinzip weisen wir hier der Variable month aber einfach nur den Monat im Format mm zu.

Die Monate von 0 bis 9 (bzw. die Tage von 1 bis 9) werden ohne führende 0 durch das Date-Objekt zurückgegeben. Deshalb fügen wir immer zur Sicherheit eine 0 vorne an und mittels slice holen wir uns dann immer die letzten 2 Zeichen eines Strings.

Zeile 6 – 7
Analog zur Zeile 4 & 5.

Zeile 9
Hier geben wir schließlich den formatierten String zurück.

Falls ihr euch fragt, warum ich hier slice anstatt substr verwende: Ältere Versionen des Internet Explorers können mit einer negativen Zahl für den Anfang der zu extrahierenden Zeichenkette nichts anfangen.

Funktion verwenden

Nun können wir unsere neue Funktion verwenden:

var dateAsString = '2013-02-05';
var date = new Date(dateAsString);

// Ausgabe: '2013-02-05'
console.log(getDateAsString(date));

Date-Klasse erweitern

Für diejenigen die lieber die Date-Klasse erweitern, hier der dazugehörige Code:

Date.prototype.asString = function()
{
	var year = this.getFullYear();
    var month = '0' + (this.getMonth() + 1);
    month = month.slice(-2, (month.length - 2) + 3);
    var day = '0' + this.getDate();
    day = day.slice(-2, (day.length - 2) + 3);

    return year + '-' + month + '-' + day;
}

Verwenden könnt ihr es dann so:

var dateAsString = '2013-02-05';
var date = new Date(dateAsString);

// Ausgabe: '2013-02-05'
console.log(date.asString());

Fazit

Falls ihr mal mit dem JavaScript Date arbeitet und ihr das Datum formatiert ausgeben lassen wollt, habt ihr hierfür nun eine einfache Möglichkeit kennengelernt.

Natürlich könntet ihr auch irgendwelche Datepicker-Plugins nutzen, die komfortablere Funktionen anbieten und jedes beliebige Format zu lassen.

Kommentare  
1 Kommentar vorhanden
1 Walter schrieb am 1. April 2014 um 13:22 Uhr

Danke für den Beitrag!

0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!