JavaScript Academy · Ders

Tarihleri ve Saatleri Biçimlendirme

Tarihleri Intl.DateTimeFormat ile görüntüleyin.

Tarihleri ve Saatleri Biçimlendirme, CoddyKit'te ücretsiz bir JavaScript Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Intl.DateTimeFormat

Intl.DateTimeFormat, Date nesnelerini bir yerel ayara göre biçimlendirir ve kırılgan elle dize oluşturma yönteminin yerini alır.

const dtf = new Intl.DateTimeFormat("en-US");
console.log(dtf.format(new Date("2026-05-29"))); // "5/29/2026"

Yerel Ayar Farkları

Tarih sıralaması bölgeye göre değişir: US için ay/gün/yıl, Avrupa'nın büyük bölümünde gün/ay/yıl kullanılır.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US").format(d)); // 5/29/2026
console.log(new Intl.DateTimeFormat("en-GB").format(d)); // 29/05/2026

Tarih Stili Ön Ayarları

dateStyle, hızlı ve okunabilir çıktı için "full", "long", "medium" ve "short" ön ayarlarını sunar.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(d));
// "Friday, May 29, 2026"

Saat Stili

timeStyle, saat bölümü için aynı şekilde çalışır ve dateStyle ile birleştirilebilir.

const d = new Date("2026-05-29T14:30:00");
console.log(new Intl.DateTimeFormat("en-US", { dateStyle: "medium", timeStyle: "short" }).format(d));
// "May 29, 2026, 2:30 PM"

Özel Bileşen Seçenekleri

Ayrıntılı denetim için year, month, day ve weekday gibi bileşenleri tek tek belirtin.

const d = new Date("2026-05-29");
const f = new Intl.DateTimeFormat("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
console.log(f.format(d)); // "Friday, May 29, 2026"

Ay Biçimleri

month, "numeric", "2-digit", "short", "long" ve "narrow" değerlerini kabul eder.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { month: "long" }).format(d));  // "May"
console.log(new Intl.DateTimeFormat("en-US", { month: "short" }).format(d)); // "May"

12 ve 24 Saat

hour12: true/false, saat biçimi için yerel ayarın varsayılanını geçersiz kılar.

const d = new Date("2026-05-29T20:05:00");
console.log(new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", hour12: false }).format(d));
// "20:05"

Saat Dilimleri

Bir tarihi, çalışma zamanının yerel saat diliminden bağımsız olarak herhangi bir bölgede görüntülemek için timeZone değerine bir IANA adı geçirin.

const d = new Date("2026-05-29T12:00:00Z");
console.log(new Intl.DateTimeFormat("en-US", { timeStyle: "long", timeZone: "Asia/Tokyo" }).format(d));

formatToParts

formatToParts, tür bilgisi içeren belirteçlerden oluşan bir dizi döndürür; böylece tek tek parçaları biçimlendirebilir veya yeniden düzenleyebilirsiniz.

const parts = new Intl.DateTimeFormat("en-US").formatToParts(new Date("2026-05-29"));
console.log(parts.map((p) => p.type + ":" + p.value).join(" "));

Aralıkları Biçimlendirme

formatRange(start, end), ortak bileşenleri birleştirerek tarih aralığını kısa biçimde görüntüler.

const f = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
console.log(f.formatRange(new Date("2026-05-01"), new Date("2026-05-05")));
// "May 1 – 5"

Gregoryen Olmayan Takvimler

calendar seçeneği "islamic", "hebrew" veya "japanese" gibi sistemleri destekler.

const d = new Date("2026-05-29");
console.log(new Intl.DateTimeFormat("en-US", { calendar: "japanese", dateStyle: "long" }).format(d));

Hızlı Kontrol

Tarih biçimlendirmeyi sınayın.

Özet: Tarihler ve Saatler

Tarihleri ve saatleri Intl.DateTimeFormat ile biçimlendirdiniz, dateStyle/timeStyle ön ayarlarını ve ayrıntılı bileşen seçeneklerini kullandınız, saat dilimlerini, 12/24 saatlik saat biçimlerini, formatToParts değerini, aralıkları ve alternatif takvimleri ele aldınız. Sırada göreli zaman ve çoğullar var.

Sıkça Sorulan Sorular

“Tarihleri ve Saatleri Biçimlendirme” dersi ücretsiz mi?

Evet — “Tarihleri ve Saatleri Biçimlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Tarihleri ve Saatleri Biçimlendirme” dersinde ne öğreneceğim?

Tarihleri Intl.DateTimeFormat ile görüntüleyin. JavaScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Tarihleri ve Saatleri Biçimlendirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← JavaScript Academy Sayfasına Dön