{"id":24,"date":"2025-10-13T02:01:00","date_gmt":"2025-10-13T00:01:00","guid":{"rendered":"https:\/\/romejs.dev\/2025\/10\/13\/javascript-date\/"},"modified":"2026-01-27T12:41:16","modified_gmt":"2026-01-27T11:41:16","slug":"javascript-date","status":"publish","type":"post","link":"https:\/\/romejs.dev\/javascript-date\/","title":{"rendered":"JavaScript Date in der Praxis: Alles, was du f\u00fcr robuste Datums- und Zeitlogik wissen musst"},"content":{"rendered":"<p>Das <strong>JavaScript Date<\/strong>-Objekt ist deine Standardbibliothek f\u00fcr Datum und Zeit in Browsern und Node.js. Es kann Millisekunden genau arbeiten, Datumswerte addieren und subtrahieren, zwischen lokaler Zeit und UTC unterscheiden und Strings in pr\u00fcfbare Zeitwerte wandeln. Gleichzeitig ist es ber\u00fcchtigt f\u00fcr Zero-based Monate, ISO-Parsing-Fallen und Zeitzonen-T\u00fccken. Hier bekommst du einen umfassenden, praxisnahen \u00dcberblick mit Best Practices, Codebeispielen und sauberer Struktur, damit deine Arbeit mit Datum und Zeit stabil bleibt. Hinweis: In modernen asynchronen Szenarien l\u00e4sst sich der Umgang mit Datum und Zeit auch hervorragend mit <a href=\"https:\/\/romejs.dev\/javascript-lernen\/\">Async\/Await<\/a> integrieren.<\/p>\n<h2>Was Date intern repr\u00e4sentiert<\/h2>\n<p>Ein <em>Date<\/em> speichert intern eine einzige Zahl: die Anzahl der Millisekunden seit dem 1. Januar 1970, 00:00:00 UTC (die Unix-Epoche). Dieser Wertebereich reicht gem\u00e4\u00df ECMAScript-Spezifikation etwa <em>\u00b1100 Millionen Tage<\/em> um diese Epoche herum, also grob <em>\u00b1273.785 Jahre<\/em>. Alle Getter\/Setter und Formatierungen leiten sich aus dieser Millisekunden-Zahl ab. Ein Date-Objekt l\u00e4uft nicht \u201clive\u201d mit \u2013 es repr\u00e4sentiert einen festen Zeitpunkt. Wenn du die \u201caktuelle Zeit\u201d brauchst, erstelle ein neues Date oder nutze <code>Date.now()<\/code>.<\/p>\n<blockquote>\n<p><strong>Merke:<\/strong> Date ist <em>mutierbar<\/em>. Methoden wie <code>setDate()<\/code> oder <code>setHours()<\/code> \u00e4ndern das bestehende Objekt in-place.<\/p>\n<\/blockquote>\n<h2>So erzeugst du ein Date-Objekt<\/h2>\n<p>Du hast mehrere Wege, ein <strong>JavaScript Date<\/strong> zu bauen. Die folgenden Varianten sind die wichtigsten:<\/p>\n<table>\n<thead>\n<tr>\n<th>Signatur<\/th>\n<th>Beschreibung<\/th>\n<th>Beispiel<\/th>\n<th>Hinweis<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>new Date()<\/code><\/td>\n<td>Aktuelles Datum\/Zeit (lokale Zeit)<\/td>\n<td><code>const d = new Date();<\/code><\/td>\n<td>Schnell f\u00fcr \u201cjetzt\u201d<\/td>\n<\/tr>\n<tr>\n<td><code>new Date(ms)<\/code><\/td>\n<td>Aus Millisekunden seit Epoche<\/td>\n<td><code>new Date(0)<\/code><\/td>\n<td>UTC-basierte Epoche<\/td>\n<\/tr>\n<tr>\n<td><code>new Date(year, monthIndex, day?, h?, m?, s?, ms?)<\/code><\/td>\n<td>Numerische Komponenten (lokal)<\/td>\n<td><code>new Date(2024, 0, 31, 23, 59)<\/code><\/td>\n<td><strong>Monat ist 0\u201311<\/strong><\/td>\n<\/tr>\n<tr>\n<td><code>new Date(isoString)<\/code><\/td>\n<td>ISO 8601-String<\/td>\n<td><code>new Date('2024-01-31T23:59:00Z')<\/code><\/td>\n<td>\u201cZ\u201d = UTC; sicherste String-Variante<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Zu den String-Varianten ist wichtig:<\/p>\n<ul>\n<li>ISO 8601, z. B. <code>2024-01-31T23:59:00Z<\/code>, ist standardisiert und zuverl\u00e4ssig. Das \u201cZ\u201d kennzeichnet UTC.<\/li>\n<li><em>Nur Datum<\/em> im ISO-Format, z. B. <code>'2024-01-31'<\/code>, wird in modernen Engines als UTC interpretiert. Das kann zu \u201c\u00dcberraschungen\u201d f\u00fchren, wenn du lokale Mitternacht erwartest.<\/li>\n<li>Nicht standardisierte Strings wie <code>'12\/31\/2024'<\/code> sind je nach Umgebung uneinheitlich \u2013 vermeide sie.<\/li>\n<li><em>Arrays<\/em> werden zu String konvertiert und f\u00fchren meist zu <code>Invalid Date<\/code> \u2013 nicht verwenden.<\/li>\n<\/ul>\n<pre><code>\/\/ korrektes ISO: UTC\nconst a = new Date('2024-01-31T23:59:00Z'); \/\/ UTC Zeitpunkt\n\n\/\/ ISO ohne Zeit -&gt; interpretiert als UTC\nconst b = new Date('2024-01-31'); \/\/ Achtung: Mitternacht UTC, nicht lokal\n\n\/\/ numerisch (lokal):\nconst c = new Date(2024, 0, 31, 23, 59); \/\/ Jan (0), lokale Zeitzone\n\n\/\/ aus Millisekunden:\nconst d = new Date(Date.now()); \/\/ \u00e4quivalent zu new Date()\n<\/code><\/pre>\n<p><img alt=\"javascript date\" decoding=\"async\" src=\"https:\/\/romejs.dev\/wp-content\/uploads\/2025\/10\/javascript_date_ins3.jpg\" style=\"display: block; margin: 20px auto; max-width: 80%; height: auto;\"\/><\/p>\n<h2>Getter und Setter richtig nutzen<\/h2>\n<p>Die API unterscheidet zwischen lokalen und UTC-Methoden. Lokale Methoden beginnen mit <code>get...<\/code>\/<code>set...<\/code>; UTC-Varianten mit <code>getUTC...<\/code>\/<code>setUTC...<\/code>.<\/p>\n<table>\n<thead>\n<tr>\n<th>Methode<\/th>\n<th>Lokale Variante<\/th>\n<th>UTC-Variante<\/th>\n<th>R\u00fcckgabe\/Bereich<\/th>\n<th>Hinweise<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Jahr<\/td>\n<td><code>getFullYear()<\/code><\/td>\n<td><code>getUTCFullYear()<\/code><\/td>\n<td>vierstellig<\/td>\n<td><code>getYear()<\/code> ist veraltet<\/td>\n<\/tr>\n<tr>\n<td>Monat<\/td>\n<td><code>getMonth()<\/code><\/td>\n<td><code>getUTCMonth()<\/code><\/td>\n<td>0\u201311<\/td>\n<td>Zero-based! Jan=0, Dez=11<\/td>\n<\/tr>\n<tr>\n<td>Tag des Monats<\/td>\n<td><code>getDate()<\/code><\/td>\n<td><code>getUTCDate()<\/code><\/td>\n<td>1\u201331<\/td>\n<td>Nicht mit <code>getDay()<\/code> verwechseln<\/td>\n<\/tr>\n<tr>\n<td>Wochentag<\/td>\n<td><code>getDay()<\/code><\/td>\n<td><code>getUTCDay()<\/code><\/td>\n<td>0\u20136 (So=0)<\/td>\n<td>So=0, Mo=1, \u2026<\/td>\n<\/tr>\n<tr>\n<td>Stunde\/Minute\/Sekunde<\/td>\n<td><code>getHours()<\/code> etc.<\/td>\n<td><code>getUTCHours()<\/code> etc.<\/td>\n<td>0\u201323 \/ 0\u201359<\/td>\n<td>Standardwerte<\/td>\n<\/tr>\n<tr>\n<td>Millisekunden<\/td>\n<td><code>getMilliseconds()<\/code><\/td>\n<td><code>getUTCMilliseconds()<\/code><\/td>\n<td>0\u2013999<\/td>\n<td>\u2014<\/td>\n<\/tr>\n<tr>\n<td>Time Value<\/td>\n<td><code>getTime()<\/code><\/td>\n<td>\u2014<\/td>\n<td>Millisekunden seit Epoche<\/td>\n<td>\u2248 <code>valueOf()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Beim Setzen zeigt sich eine der gr\u00f6\u00dften St\u00e4rken von <em>Date<\/em>: automatisches \u201cRollover\u201d. \u00dcbergibst du Werte au\u00dferhalb des Bereichs, korrigiert das Objekt Monat\/Jahr entsprechend.<\/p>\n<pre><code>const d = new Date(2024, 0, 31);  \/\/ 31. Jan 2024 (lokal)\nd.setDate(d.getDate() + 1);       \/\/ 1. Feb 2024\n\n\/\/ Negativer oder \"zu gro\u00dfer\" Tag funktioniert ebenfalls:\nconst e = new Date(2024, 1, 1);   \/\/ 1. Feb 2024\ne.setDate(0);                     \/\/ 31. Jan 2024\n<\/code><\/pre>\n<blockquote>\n<p><strong>Pro-Tipp:<\/strong> Nutze das Rollover-Verhalten f\u00fcr Monats-\/Jahreswechsel. Du musst keine Monatsl\u00e4ngen selbst berechnen.<\/p>\n<\/blockquote>\n<h2>Strings ausgeben: toLocale\u2026, toISOString, Intl.DateTimeFormat<\/h2>\n<p>F\u00fcr UI-Ausgaben brauchst du formatierte Strings. Zudem spielt das <a href=\"https:\/\/romejs.dev\/was-ist-javascript\/\">DOM<\/a> eine zentrale Rolle bei der Einbindung von Datumswerten in Webanwendungen. Du hast drei Hauptwege:<\/p>\n<ul>\n<li><strong>Lokalisierte Ausgabe<\/strong> mit <code>toLocaleDateString()<\/code>, <code>toLocaleTimeString()<\/code>, <code>toLocaleString()<\/code>.<\/li>\n<li><strong>ISO 8601<\/strong> mit <code>toISOString()<\/code> f\u00fcr stabile, transportf\u00e4hige Repr\u00e4sentation.<\/li>\n<li><strong>Hohe Kontrolle und Performance<\/strong> mit <code>Intl.DateTimeFormat<\/code>.<\/li>\n<\/ul>\n<pre><code>const d = new Date('2024-01-31T23:59:00Z');\n\n\/\/ Lokalisierte Beispiele\nd.toLocaleDateString('de-DE'); \/\/ \"1.2.2024\" (je nach TZ, da UTC-&gt;lokal)\nd.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }); \/\/ \"00:59\"\n\n\/\/ ISO immer UTC mit 'Z':\nd.toISOString(); \/\/ \"2024-01-31T23:59:00.000Z\"\n\n\/\/ Wiederverwendbares Formatter-Objekt:\nconst fmt = new Intl.DateTimeFormat('de-DE', {\n  weekday: 'long',\n  year: 'numeric',\n  month: 'long',\n  day: 'numeric',\n  hour: '2-digit',\n  minute: '2-digit',\n  timeZone: 'Europe\/Berlin'\n});\nfmt.format(d); \/\/ \"Donnerstag, 1. Februar 2024 um 00:59\"\n<\/code><\/pre>\n<blockquote>\n<p><strong>Regel:<\/strong> F\u00fcr Speicherung und API-Transport nutze <em>ISO 8601<\/em> (<code>toISOString()<\/code>) oder Zahlenzeitstempel. F\u00fcr UI nutze <code>Intl.DateTimeFormat<\/code> mit expliziter <code>timeZone<\/code>.<\/p>\n<\/blockquote>\n<h2>Zeitzonen, UTC und Sommerzeit<\/h2>\n<p>Standard-<em>Date<\/em> kennt genau zwei \u201cSichten\u201d: <em>lokale Zeit<\/em> und <em>UTC<\/em>. Die lokale Zeitzone kommt vom System. Der Versatz zur UTC ist \u00fcber <code>getTimezoneOffset()<\/code> zug\u00e4nglich \u2013 in Minuten, mit Vorzeichen aus Sicht der lokalen Zeit.<\/p>\n<pre><code>const d = new Date();\nconst offsetMinutes = d.getTimezoneOffset();  \/\/ z. B. -60 f\u00fcr UTC+1\n<\/code><\/pre>\n<p>Sommerzeit (DST) macht Offsets dynamisch. Daher ist dieselbe Uhrzeit im Jahr nicht immer gleich versetzt. F\u00fcr Berechnungen, die unabh\u00e4ngig von DST sein sollen, arbeite in UTC:<\/p>\n<pre><code>\/\/ Start des Tages in UTC:\nfunction startOfDayUTC(d) {\n  const copy = new Date(d.getTime());\n  copy.setUTCHours(0, 0, 0, 0);\n  return copy;\n}\n<\/code><\/pre>\n<p>Wenn du gezielt in einer bestimmten IANA-Zeitzone (z. B. <em>Europe\/Berlin<\/em>, <em>America\/New_York<\/em>) darstellen willst, nutze <code>Intl.DateTimeFormat<\/code> mit <code>timeZone<\/code>:<\/p>\n<pre><code>const d = new Date('2024-03-31T00:30:00Z');\nnew Intl.DateTimeFormat('de-DE', { timeZone: 'Europe\/Berlin', timeStyle: 'short', dateStyle: 'medium' })\n  .format(d); \/\/ Beachtet die Zeitumstellung Ende M\u00e4rz\n<\/code><\/pre>\n<p>F\u00fcr UTC-Werte aus Komponenten existiert <code>Date.UTC()<\/code>. Es gibt die Millisekunden seit Epoche zur\u00fcck, nicht ein Date-Objekt.<\/p>\n<pre><code>const utcMs = Date.UTC(2024, 0, 31, 23, 59); \/\/ Jan ist 0\nconst d = new Date(utcMs); \/\/ identischer Zeitpunkt in UTC\n<\/code><\/pre>\n<p><img alt=\"javascript date\" decoding=\"async\" src=\"https:\/\/romejs.dev\/wp-content\/uploads\/2025\/10\/javascript_date_ins6.jpg\" style=\"display: block; margin: 20px auto; max-width: 80%; height: auto;\"\/><\/p>\n<h2>Zeitstempel, Unix-Zeit und Messungen<\/h2>\n<p>JavaScript nutzt Millisekunden seit Epoche. Unix-Timestamps sind meist in Sekunden. Die Konvertierung ist trivial:<\/p>\n<pre><code>\/\/ Date -&gt; Unix Sekunden\nconst unix = Math.floor(Date.now() \/ 1000);\n\n\/\/ Unix Sekunden -&gt; Date\nconst fromUnix = (s) =&gt; new Date(s * 1000);\n<\/code><\/pre>\n<p>F\u00fcr Zeitmessungen im Code gilt:<\/p>\n<ul>\n<li><code>Date.now()<\/code> ist gut f\u00fcr \u201cwall-clock time\u201d, kann sich aber \u00e4ndern (Systemuhr, NTP).<\/li>\n<li><code>performance.now()<\/code> ist monoton und hochaufl\u00f6send \u2013 ideal f\u00fcr Benchmarks und Dauerberechnungen.<\/li>\n<\/ul>\n<pre><code>const t0 = performance.now();\n\/\/ ... zu messender Code ...\nconst dt = performance.now() - t0; \/\/ Millisekunden, monotone Uhr\n<\/code><\/pre>\n<h2>Datumsarithmetik: addieren, subtrahieren, differenzieren<\/h2>\n<p>Dank Rollover sind viele Aufgaben einfach:<\/p>\n<pre><code>\/\/ 30 Tage addieren (lokal)\nfunction addDays(date, days) {\n  const d = new Date(date.getTime());\n  d.setDate(d.getDate() + days);\n  return d;\n}\n\n\/\/ N Stunden abziehen (UTC-sicher)\nfunction addHoursUTC(date, hours) {\n  const d = new Date(date.getTime());\n  d.setUTCHours(d.getUTCHours() + hours);\n  return d;\n}\n<\/code><\/pre>\n<p>Differenzen berechnest du \u00fcber die Millisekunden:<\/p>\n<pre><code>\/\/ Differenz in Tagen (metrisch), Achtung: DST kann \"Kalendertage\" verzerren\nfunction diffDays(a, b) {\n  const ms = a.getTime() - b.getTime();\n  return ms \/ 86400000; \/\/ 24*60*60*1000\n}\n\n\/\/ Kalender-tagesgenau (UTC-Normalisierung beugt DST-Fallen vor)\nfunction diffCalendarDays(a, b) {\n  const uA = Date.UTC(a.getUTCFullYear(), a.getUTCMonth(), a.getUTCDate());\n  const uB = Date.UTC(b.getUTCFullYear(), b.getUTCMonth(), b.getUTCDate());\n  return Math.round((uA - uB) \/ 86400000);\n}\n<\/code><\/pre>\n<blockquote>\n<p><strong>Wichtig:<\/strong> Willst du \u201cAnzahl Kalendertage\u201d zwischen zwei Daten, normalisiere auf UTC-Mitternacht. Sonst verschieben Sommerzeit\u00fcberg\u00e4nge dein Ergebnis.<\/p>\n<\/blockquote>\n<h2>Spezialf\u00e4lle: Schaltjahre, Invalid Date, Grenzen<\/h2>\n<p>Schaltjahrregeln: Teilbar durch 4 ist Schaltjahr, au\u00dfer zugleich durch 100; wiederum doch Schaltjahr, wenn durch 400 teilbar. Javascript macht\u2019s dir leicht:<\/p>\n<pre><code>function isLeapYear(year) {\n  const d = new Date(Date.UTC(year, 1, 29)); \/\/ 29. Februar in UTC\n  return d.getUTCMonth() === 1;              \/\/ bleibt Februar?\n}\n<\/code><\/pre>\n<p>Ung\u00fcltige Eingaben f\u00fchren zu <code>Invalid Date<\/code>. Pr\u00fcfen kannst du \u00fcber <code>isNaN(d.getTime())<\/code>:<\/p>\n<pre><code>const d = new Date('not-a-date');\nif (isNaN(d.getTime())) {\n  console.error('Ung\u00fcltiges Datum');\n}\n<\/code><\/pre>\n<p>Zum Bereich: Die Spezifikation verlangt etwa \u00b18.64e15 ms um die Epoche, was sehr weite Bereiche abdeckt. In der Praxis sind extrem gro\u00dfe Werte selten sinnvoll.<\/p>\n<h2>Best Practices kompakt<\/h2>\n<ul>\n<li><strong>Speichern\/Transport:<\/strong> ISO 8601 (<code>toISOString()<\/code>) oder Millisekunden\/Unix-Sekunden.<\/li>\n<li><strong>UI\/Anzeige:<\/strong> <code>Intl.DateTimeFormat<\/code> mit expliziter <code>timeZone<\/code>.<\/li>\n<li><strong>Parsing:<\/strong> Nur <em>ISO 8601<\/em> verwenden. Keine sprach- oder regionenspezifischen Formate parsen.<\/li>\n<li><strong>Arithmetik:<\/strong> F\u00fcr kalendarische Berechnungen UTC-normalisieren; f\u00fcr \u201cDauern\u201d Millisekunden verwenden.<\/li>\n<li><strong>Monate:<\/strong> Zero-based im Konstruktor und bei <code>getMonth()<\/code>\/<code>setMonth()<\/code>.<\/li>\n<li><strong>Wochentag:<\/strong> <code>getDay()<\/code> gibt 0\u20136 mit Sonntag=0; nicht mit <code>getDate()<\/code> verwechseln.<\/li>\n<li><strong>Messungen:<\/strong> <code>performance.now()<\/code> f\u00fcr Benchmarks nutzen.<\/li>\n<li><strong>Zeitzone bewusst setzen:<\/strong> UI-Ausgabe immer mit expliziter IANA-Zeitzone, wenn erwartbar.<\/li>\n<\/ul>\n<h2>Kochrezepte f\u00fcr den Alltag<\/h2>\n<h3>Start\/Ende des Tages<\/h3>\n<pre><code>function startOfDayLocal(d) {\n  const c = new Date(d.getTime());\n  c.setHours(0, 0, 0, 0);\n  return c;\n}\nfunction endOfDayLocal(d) {\n  const c = new Date(d.getTime());\n  c.setHours(23, 59, 59, 999);\n  return c;\n}\n<\/code><\/pre>\n<h3>N\u00e4chster Montag<\/h3>\n<pre><code>function nextMonday(d) {\n  const c = new Date(d.getTime());\n  const day = c.getDay();           \/\/ So=0, Mo=1, ...\n  const delta = (8 - day) % 7 || 7; \/\/ Wenn heute Mo, dann +7 Tage\n  c.setDate(c.getDate() + delta);\n  return c;\n}\n<\/code><\/pre>\n<h3>Runden auf 5-Minuten<\/h3>\n<pre><code>function roundTo5Min(d) {\n  const ms = 5 * 60 * 1000;\n  return new Date(Math.round(d.getTime() \/ ms) * ms);\n}\n<\/code><\/pre>\n<h3>Kalenderwoche (ISO-8601)<\/h3>\n<pre><code>\/\/ ISO-Woche: Montag als Wochenbeginn, KW 1 enth\u00e4lt den 4. Januar\nfunction getISOWeek(date) {\n  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));\n  const dayNum = d.getUTCDay() || 7; \/\/ So=7\n  d.setUTCDate(d.getUTCDate() + 4 - dayNum);\n  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));\n  const weekNo = Math.ceil((((d - yearStart) \/ 86400000) + 1) \/ 7);\n  return { year: d.getUTCFullYear(), week: weekNo };\n}\n<\/code><\/pre>\n<h3>Stabil in bestimmter Zeitzone formatieren<\/h3>\n<pre><code>function formatInTZ(d, timeZone, locale = 'de-DE') {\n  return new Intl.DateTimeFormat(locale, {\n    timeZone,\n    dateStyle: 'medium',\n    timeStyle: 'short'\n  }).format(d);\n}\n<\/code><\/pre>\n<h2>Alternativen und Erweiterungen: Intl, Temporal, Libraries<\/h2>\n<p><strong>Intl.DateTimeFormat<\/strong> ist die native, performante L\u00f6sung f\u00fcr Formatierung und Lokalisierung, inklusive IANA-Zeitzonen. Wenn du komplexere Logik brauchst, helfen Libraries:<\/p>\n<ul>\n<li><strong>date-fns<\/strong>: Moderne, treeshakable Funktionen f\u00fcr Parsing, Formatierung, Arithmetik. Gute Wahl f\u00fcr modulare Nutzung.<\/li>\n<li><strong>Luxon<\/strong>: Auf Intl basierend, mit <em>DateTime<\/em>-Objekt und robuster Zeitzonen-Unterst\u00fctzung.<\/li>\n<li><strong>Moment.js<\/strong> (Legacy): Stabil, aber \u201cmaintenance mode\u201d. F\u00fcr neue Projekte nicht mehr empfohlen.<\/li>\n<\/ul>\n<p>Die <strong>Temporal<\/strong>-API ist eine in Entwicklung befindliche Spezifikation, die Datums-\/Zeitlogik sicherer und expliziter machen soll (z. B. <code>Temporal.ZonedDateTime<\/code>, <code>Temporal.PlainDate<\/code>). In einigen Umgebungen ist sie bereits als Polyfill nutzbar. F\u00fcr produktive Browser-\/Node-Umgebungen pr\u00fcfe den aktuellen Support-Status und verwende bei Bedarf das Polyfill.<\/p>\n<h2>Fehlerquellen und Debugging<\/h2>\n<ul>\n<li><strong>\u201cYYYY-MM-DD\u201d als UTC:<\/strong> Wenn du lokale Mitternacht brauchst, setze Zeit und Zeitzone explizit oder konstruiere numerisch mit lokalen Komponenten.<\/li>\n<li><strong>Sommerzeit-Spr\u00fcnge:<\/strong> Zeitspannen immer \u00fcber Millisekunden und ggf. in UTC rechnen; F\u00fcr \u201cKalendertage\u201d normalisieren.<\/li>\n<li><strong>Monatsindex 0\u201311:<\/strong> H\u00e4ufigster Bug bei <code>new Date(year, monthIndex, ...)<\/code>.<\/li>\n<li><strong>Parsing inhomogener Strings:<\/strong> Nur ISO akzeptieren, alles andere vorher selbst validieren\/konvertieren.<\/li>\n<li><strong>Invalid Date:<\/strong> Immer \u00fcber <code>isNaN(d.getTime())<\/code> pr\u00fcfen.<\/li>\n<\/ul>\n<h2>Leistungsaspekte<\/h2>\n<ul>\n<li><strong>Formatierung:<\/strong> Erzeuge <em>ein<\/em> <code>Intl.DateTimeFormat<\/code>-Objekt und wiederverwende es, wenn viele Datumswerte formatiert werden.<\/li>\n<li><strong>Aktuellen Zeitwert<\/strong> mit <code>Date.now()<\/code> statt <code>new Date().getTime()<\/code> ermitteln \u2013 minimal schneller und ohne Objekt-Allokation.<\/li>\n<li><strong>Benchmarks\/Timer:<\/strong> <code>performance.now()<\/code> nutzen, da eine monotone Uhr ben\u00f6tigt wird \u2013 bedenke, dass der <a href=\"https:\/\/romejs.dev\/javascript-settimeout\/\">Event Loop<\/a> daf\u00fcr sorgt, dass alle zeitkritischen Aufgaben reibungslos abgearbeitet werden.<\/li>\n<\/ul>\n<h2>Praxisnahe Beispiele integriert<\/h2>\n<h3>1) F\u00e4lligkeitsdatum in 30 Kalendertagen (lokal) mit Anzeige in Berlin-Zeit<\/h3>\n<pre><code>function dueIn30Days() {\n  const now = new Date();\n  const due = new Date(now.getTime());\n  due.setDate(due.getDate() + 30);\n  const fmt = new Intl.DateTimeFormat('de-DE', {\n    dateStyle: 'full',\n    timeStyle: 'short',\n    timeZone: 'Europe\/Berlin'\n  });\n  return fmt.format(due);\n}\n<\/code><\/pre>\n<h3>2) API-Eingang als ISO speichern, UI lokal anzeigen<\/h3>\n<pre><code>\/\/ Server sendet ISO (UTC):\nconst iso = '2024-01-31T23:59:00.000Z';\nconst d = new Date(iso);\n\n\/\/ UI (lokal):\nconst ui = new Intl.DateTimeFormat('de-DE', { dateStyle: 'medium', timeStyle: 'short' }).format(d);\n\n\/\/ Persistenz:\nconst persist = d.toISOString();\n<\/code><\/pre>\n<h3>3) Dauer in Stunden\/Minuten robust zeigen<\/h3>\n<pre><code>function formatDuration(ms) {\n  const totalMin = Math.floor(ms \/ 60000);\n  const h = Math.floor(totalMin \/ 60);\n  const m = totalMin % 60;\n  return `${h}h ${String(m).padStart(2, '0')}m`;\n}\n\nconst started = Date.now();\n\/\/ ... Arbeit ...\nconst elapsed = Date.now() - started;\nconsole.log(formatDuration(elapsed));\n<\/code><\/pre>\n<h2>Fazit<\/h2>\n<p><strong>JavaScript Date<\/strong> ist ein leistungsf\u00e4higes Fundament f\u00fcr Datums- und Zeitlogik \u2013 <em>wenn<\/em> du seine Eigenheiten bewusst einsetzt. Arbeite f\u00fcr Transport und Speicherung mit ISO-Strings oder numerischen Timestamps, formatiere f\u00fcr die UI mit <code>Intl.DateTimeFormat<\/code> und setze Zeitzonen explizit, wenn du eine bestimmte Region erwartest. Nutze das Rollover-Verhalten f\u00fcr Arithmetik, normalisiere f\u00fcr kalendarische Differenzen auf UTC-Mitternacht und meide uneinheitliche String-Formate. F\u00fcr komplexere Anforderungen stehen dir moderne Libraries und die aufkommende Temporal-API zur Verf\u00fcgung. Mit diesen Prinzipien baust du robuste und vorhersagbare Datumsfunktionen \u2013 von der API-Schicht bis zur sauberen Anzeige.<\/p>\n<h2>FAQ<\/h2>\n<h3>Wie konvertiere ich zwischen Date und Unix-Timestamp?<\/h3>\n<p>Date liefert Millisekunden. Unix-Timestamps sind Sekunden.<\/p>\n<ul>\n<li>Date \u2192 Unix: <code>Math.floor(Date.now() \/ 1000)<\/code><\/li>\n<li>Unix \u2192 Date: <code>new Date(unixSeconds * 1000)<\/code><\/li>\n<\/ul>\n<h3>Warum ist \u201c2024-01-01\u201d nicht lokale Mitternacht?<\/h3>\n<p>Das ISO-Datum ohne Zeit\/Offset wird in modernen Engines als <em>UTC<\/em> interpretiert. Wenn du lokale Mitternacht willst, verwende numerische Konstruktion <code>new Date(year, monthIndex, day)<\/code> oder setze explizit Stunde\/Zeitzone in der Formatierung.<\/p>\n<h3>Wieso beginnt <code>getMonth()<\/code> bei 0?<\/h3>\n<p>Das ist Designhistorie der Spezifikation. Januar=0, Dezember=11. Achte beim numerischen Konstruktor und bei <code>getMonth()<\/code>\/<code>setMonth()<\/code> stets auf Zero-based Monate.<\/p>\n<h3>Worin liegt der Unterschied zwischen <code>getDate()<\/code> und <code>getDay()<\/code>?<\/h3>\n<p><code>getDate()<\/code> liefert den Tag im Monat (1\u201331). <code>getDay()<\/code> liefert den Wochentag (0\u20136, Sonntag=0). Diese Verwechslung ist ein h\u00e4ufiger Bug.<\/p>\n<h3>Wie formatiere ich zuverl\u00e4ssig in einer bestimmten Zeitzone?<\/h3>\n<p>Mit <code>Intl.DateTimeFormat<\/code> und <code>timeZone<\/code>:<\/p>\n<pre><code>new Intl.DateTimeFormat('de-DE', {\n  dateStyle: 'medium',\n  timeStyle: 'short',\n  timeZone: 'Europe\/Berlin'\n}).format(date);\n<\/code><\/pre>\n<h3>Wie pr\u00fcfe ich auf <code>Invalid Date<\/code>?<\/h3>\n<p>\u00dcber die Zeitwert-Pr\u00fcfung:<\/p>\n<pre><code>const d = new Date(input);\nif (isNaN(d.getTime())) {\n  \/\/ ung\u00fcltig\n}\n<\/code><\/pre>\n<h3>Wie berechne ich kalendarische Tagesdifferenzen ohne DST-Fehler?<\/h3>\n<p>Normalisiere beide Daten auf UTC-Mitternacht und teile die Differenz durch <code>86400000<\/code>. Beispiel siehe <em>diffCalendarDays<\/em> oben.<\/p>\n<h3>Ist <code>Date.now()<\/code> oder <code>new Date()<\/code> besser?<\/h3>\n<p><code>Date.now()<\/code> ist minimal schneller und erzeugt kein Objekt. Wenn du nur den Zeitstempel brauchst, nimm <code>Date.now()<\/code>.<\/p>\n<h3>Wann sollte ich Libraries nutzen?<\/h3>\n<p>Wenn du viele Operationen auf Kalenderbasis, wiederkehrende Formatierungen in vielen Locales, komplexe Zeitzonenlogik oder saubere, deklarative APIs brauchst. <em>date-fns<\/em> und <em>Luxon<\/em> sind gute moderne Optionen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das JavaScript Date-Objekt ist deine Standardbibliothek f\u00fcr Datum und Zeit in Browsern und Node.js. Es kann Millisekunden genau arbeiten, Datumswerte addieren und subtrahieren, zwischen lokaler Zeit und UTC unterscheiden und Strings in pr\u00fcfbare Zeitwerte wandeln. Gleichzeitig ist es ber\u00fcchtigt f\u00fcr Zero-based Monate, ISO-Parsing-Fallen und Zeitzonen-T\u00fccken. Hier bekommst du einen umfassenden, praxisnahen \u00dcberblick mit Best Practices, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":21,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-24","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript","entry"],"_links":{"self":[{"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":2,"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":123,"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/posts\/24\/revisions\/123"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/media\/21"}],"wp:attachment":[{"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/romejs.dev\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}