path: root/files/de/web/javascript/reference/global_objects/intl/datetimeformat/index.html

---
title: Intl.DateTimeFormat
slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
tags:
  - DateTimeFormat
  - Internationalization
  - JavaScript
translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat
---
<div>{{JSRef}}</div>

<p>Das <strong><code>Intl.DateTimeFormat</code></strong> Objekt ist ein Konstruktor für Objekte, die sprachsensitive Formatierung von Datums- und Zeitangaben ermöglicht.</p>

<div>{{EmbedInteractiveExample("pages/js/intl-datetimeformat.html")}}</div>



<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox"><code>new Intl.DateTimeFormat([<var>locales</var>[, <var>options</var>]])
Intl.DateTimeFormat.call(<var>this</var>[, <var>locales</var>[, <var>options</var>]])</code></pre>

<h3 id="Parameter">Parameter</h3>

<dl>
 <dt><code>locales</code></dt>
 <dd>Optional. Ein String mit einem BCP 47 Sprachcode, oder einem Array von Sprachcodes. Für die generelle Form und Interpretation des <code>locales</code> Arguments siehe auf der {{jsxref("Global_Objects/Intl", "Intl Seite", "#Locale_identification_and_negotiation", 1)}}. Die folgenden  Unicode Erweiterungen sind erlaubt:</dd>
 <dd>
 <dl>
  <dt><code>nu</code></dt>
  <dd>Zahlensysteme. Mögliche Werte sind: <code>"arab"</code>, <code>"arabext"</code>, <code>"bali"</code>, <code>"beng"</code>, <code>"deva"</code>, <code>"fullwide"</code>, <code>"gujr"</code>, <code>"guru"</code>, <code>"hanidec"</code>, <code>"khmr"</code>, <code>"knda"</code>, <code>"laoo"</code>, <code>"latn"</code>, <code>"limb"</code>, <code>"mlym"</code>, <code>"mong"</code>, <code>"mymr"</code>, <code>"orya"</code>, <code>"tamldec"</code>, <code>"telu"</code>, <code>"thai"</code>, <code>"tibt"</code>.</dd>
  <dt><code>ca</code></dt>
  <dd>Kalender. Mögliche Werte sind: <code>"buddhist"</code>, <code>"chinese"</code>, <code>"coptic"</code>, <code>"ethioaa"</code>, <code>"ethiopic"</code>, <code>"gregory"</code>, <code>"hebrew"</code>, <code>"indian"</code>, <code>"islamic"</code>, <code>"islamicc"</code>, <code>"iso8601"</code>, <code>"japanese"</code>, <code>"persian"</code>, <code>"roc"</code>.</dd>
  <dt><code>hc</code></dt>
  <dd>Stundenzyklus. Mögliche Werte sind: <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code>, <code>"h24"</code>.</dd>
 </dl>
 </dd>
 <dt><code>options</code></dt>
 <dd>
 <p>Optional. Ein Objekt mit einigen oder allen folgenden Eigenschaften:</p>

 <dl>
  <dt><code>localeMatcher</code></dt>
  <dd>Der Sprachfindungsalgorithmus, der eingesetzt wird. Mögliche Werte sind <code>"lookup"</code> und <code>"best fit"</code>. Als Standard ist <code>"best fit"</code> vorgegeben. Für Informationen über diese Option siehe auf der {{jsxref("Global_Objects/Intl", "Intl Seite", "#Locale_negotiation", 1)}} nach.</dd>
  <dt><code>timeZone</code></dt>
  <dd>Die eingesetzte Zeitzone. Der einzige Wert, den alle Implementierungen verstehen ist <code>"UTC"</code>. Der Standardwert ist die Standard-Laufzeitzeitzone. Manche Implementierungen erkennen auch die Namen der <a href="https://www.iana.org/time-zones">IANA Zeitzonendatenbank</a>, wie zum Beispiel <code>"Asia/Shanghai"</code>, <code>"Asia/Kolkata"</code> und <code>"America/New_York"</code>.</dd>
  <dt><code>hour12</code></dt>
  <dd>Wird eingesetzt, wenn 12-Stunden Zeitangaben eingesetzt werden (im gegensatz zu 24-Stunden Zeitangaben). Mögliche Werte sind <code>true</code> und <code>false</code>. Diese Option überschreibt den  <code>hc</code> Sprachen-Tag und/oder <code>hourCycle</code> wenn beide vorhanden sind.</dd>
  <dt><code>hourCycle</code></dt>
  <dd>Der eingesetzte Stundenzyklus. Mögliche Werte sind <code>"h11"</code>, <code>"h12"</code>, <code>"h23"</code> oder <code>"h24"</code>. Diese Option überschreibt den  <code>hc</code> Sprachen-Tag, wenn beide präsent sind und die <code>hour12</code> Option hat Vorrang, wenn beide Optionen spezifiziert sind.</dd>
  <dt><code>formatMatcher</code></dt>
  <dd>Der eingesetzte Formaterkennungsalgorithmus. Mögliche Werte sind <code>"basic"</code> und <code>"best fit"</code>. Der Standard ist <code>"best fit"</code>. Siehe folgenden Absatz, um den Einsatz dieses Parameters zu verstehen.</dd>
 </dl>

 <p>Die folgenden Eigenschaften beschreiben die Datums-Zeit-Komponenten, die für die formatierten Ausgabe eingesetzt werden und deren Repräsentation. Implementierungen müssen folgende Kombinationen der Eigenschaften unterstützen:</p>

 <ul>
  <li><code>Wochentag, Jahr, Monat, Tag, Stunde, Minute, Sekunde</code></li>
  <li><code>Wochentag, Jahr, Monat, Tag </code></li>
  <li><code>Jahr, Monat, Tag </code></li>
  <li><code>Jahr, Monat</code></li>
  <li><code>Monat, Tag </code></li>
  <li><code>Stunde, Minute, Sekunde </code></li>
  <li><code>Stunde, Minute</code></li>
 </ul>

 <p>Manche Implementierungen unterstützen weitere Kombinationen der Parameter. Es wird immer auf alle möglichen Kombinationen geprüft, um den besten Treffer zu landen. Zwei Algorithmen sind für die Auswahl der Kombination vorhanden: Ein <a href="http://www.ecma-international.org/ecma-402/1.0/#BasicFormatMatcher">voll spezifizierter <code>"basic"</code> Algorithmus</a> und ein implementierungsabhängiger <code>"best fit"</code> Algorithmus.</p>

 <dl>
  <dt><code>weekday</code></dt>
  <dd>Die Repräsentation der Wochentage. Mögliche Werte sind <code>"narrow"</code>, <code>"short"</code> und <code>"long"</code>.</dd>
  <dt><code>era</code></dt>
  <dd>Die Repräsentation der Epoche. Mögliche Werte sind <code>"narrow"</code>, <code>"short"</code> und <code>"long"</code>.</dd>
  <dt><code>year</code></dt>
  <dd>Die Repräsentation des Jahres. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
  <dt><code>month</code></dt>
  <dd>Die Repräsentation des Monats. Mögliche Werte sind <code>"numeric"</code>, <code>"2-digit"</code>, <code>"narrow"</code>, <code>"short"</code> und <code>"long"</code>.</dd>
  <dt><code>day</code></dt>
  <dd>Die Repräsentation des Tages. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
  <dt><code>hour</code></dt>
  <dd>Die Repräsentation der Stunden. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
  <dt><code>minute</code></dt>
  <dd>Die Repräsentation der Minuten. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
  <dt><code>second</code></dt>
  <dd>Die Repräsentation der Sekunden. Mögliche Werte sind <code>"numeric"</code> und <code>"2-digit"</code>.</dd>
  <dt><code>timeZoneName</code></dt>
  <dd>Die Repräsentation des Zeitzonennamens. Mögliche Werte sind <code>"short"</code> und <code>"long"</code>.</dd>
 </dl>

 <p class="noinclude">Die Standardwerte für jede Datums-Zeit-Komponente ist {{jsxref("undefined")}}, wenn jedoch alle Komponenten {{jsxref("undefined")}} sind, wird <code>year</code>, <code>month</code>, and <code>day</code> als <code>"numeric"</code> angenommen.</p>
 </dd>
</dl>

<h2 id="Beschreibung">Beschreibung</h2>

<h3 id="Eigenschaften">Eigenschaften</h3>

<dl>
 <dt>{{jsxref("DateTimeFormat.prototype", "Intl.DateTimeFormat.prototype")}}</dt>
 <dd>Ermögliche es Eigenschaften und Methoden für alle Objekte zu definieren.</dd>
</dl>

<h3 id="Methoden">Methoden</h3>

<dl>
 <dt>{{jsxref("DateTimeFormat.supportedLocalesOf", "Intl.DateTimeFormat.supportedLocalesOf()")}}</dt>
 <dd>Gibt ein Array an Sprachen zurück, die unterstützt werden, ohne dass auf den Laufzeitumgebungsstandard zurückgegriffen wird.</dd>
</dl>

<h2 id="DateTimeFormat_Instanzen"><code>DateTimeFormat</code> Instanzen</h2>

<h3 id="Eigenschaften_2">Eigenschaften</h3>

<p><code>DateTimeFormat</code> Instanzen erben die folgenden Eigenschaften von ihrem Prototypen:</p>

<div>{{page("/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype", "Eigenschaften")}}</div>

<h3 id="Methoden_2">Methoden</h3>

<p><code>DateTimeFormat</code> Instanzen erben die folgenden Methoden von ihrem Prototypen:</p>

<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype', 'Methoden')}}</div>

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Einsatz_von_DateTimeFormat">Einsatz von <code>DateTimeFormat</code></h3>

<p>Der Basiseinsatz ohne extra Sprach- und Formatierungsoptionen, sondern den Standardeinstellungen.</p>

<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// toLocaleString ohne Argumente ist von der implementierunge,
// der Standardsprache und der Standardzeitzone abhängig.
console.log(new Intl.DateTimeFormat().format(date));
// → "12/19/2012" wenn das Gebiet en-US mit der Zeitzone America/Los_Angeles (UTC-0800) der Standard ist.
</pre>

<h3 id="Einsatz_von_locales">Einsatz von <code>locales</code></h3>

<p>Das folgende Beispiel zeigt verschiedene Formatierungsoptionen von Datums- und Zeitformaten. Um sicherzustellen, dass das Format der Sprache eingesetzt wird, die in der Benutzerschnittstelle benutzt wird, muss diese (und mögliche Rückfallsprachen) mit dem <code>locales</code> Argument eingestellt werden.</p>

<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// Die folgenden Formate setzen die Zeitzone America/Los_Angeles
// für die Sprache US voraus.

// US englisch: Monat-Tag-Jahr
console.log(new Intl.DateTimeFormat('en-US').format(date));
// → "12/19/2012"

// Britisch englisch: Tag-Monat-Jahr
console.log(new Intl.DateTimeFormat('en-GB').format(date));
// → "20/12/2012"

// Koreanisch: Jahr-Monat-Tag
console.log(new Intl.DateTimeFormat('ko-KR').format(date));
// → "2012. 12. 20."

// Arabisch: In den meisten arabischen Ländern werden arabische Ziffern genutzt
console.log(new Intl.DateTimeFormat('ar-EG').format(date));
// → "<span dir="rtl">٢٠‏/١٢‏/٢٠١٢</span>"

// Japanisch: In Japan wird der japanische Kalender eingesetzt:
// 2012 ist in diesem das Jahr 24 der Heisei Ära.
console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date));
// → "24/12/20"

// Einsatz von Sprachen, die vielleicht nicht unterstützt werden:
// Balinesisch, und Indonesisch als Rückfallsprache.
console.log(new Intl.DateTimeFormat(['ban', 'id']).format(date));
// → "20/12/2012"
</pre>

<h3 id="Einsatz_von_options">Einsatz von <code>options</code></h3>

<p>Das Datums- und Zeitformat kann mit dem Einsatz des <code>options</code> Arguments vom Benutzer definiert werden.</p>

<pre class="brush: js">var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

// Langer Wochentag mit langem Datum
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(new Intl.DateTimeFormat('de-DE', options).format(date));
// → "Donnerstag, 20. Dezember 2012"

// sichtbares UTC
options.timeZone = 'UTC';
options.timeZoneName = 'short';
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// → "Thursday, December 20, 2012, GMT"

// Präzisere Angaben der Zeit
options = {
  hour: 'numeric', minute: 'numeric', second: 'numeric',
  timeZone: 'Australia/Sydney',
  timeZoneName: 'short'
};
console.log(new Intl.DateTimeFormat('en-AU', options).format(date));
// → "2:00:00 pm AEDT"

// 24-Stunden Angabe in US Zeiten
options = {
  year: 'numeric', month: 'numeric', day: 'numeric',
  hour: 'numeric', minute: 'numeric', second: 'numeric',
  hour12: false,
  timeZone: 'America/Los_Angeles'
};
console.log(new Intl.DateTimeFormat('en-US', options).format(date));
// → "12/19/2012, 19:00:00"
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('ES Int 1.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
   <td>{{Spec2('ES Int 1.0')}}</td>
   <td>Initiale Definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES Int 2.0', '#sec-12.1', 'Intl.DateTimeFormat')}}</td>
   <td>{{Spec2('ES Int 2.0')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES Int Draft', '#datetimeformat-objects', 'Intl.DateTimeFormat')}}</td>
   <td>{{Spec2('ES Int Draft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<div>


<p>{{Compat("javascript.builtins.Intl.DateTimeFormat")}}</p>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<div>{{page('/de/docs/Web/JavaScript/Reference/Global_Objects/Intl', 'See_also')}}</div>