Emre

Emre

WFN Üye
Konular
1,664
Mesajlar
1,760
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 4 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
İhtiyacınıza göre Date nesnesini doğrudan metne çevirmek yerine Intl.DateTimeFormat veya toLocaleDateString() kullanın. Böylece ay adları, gün sırası ve sayı biçimi Türkçe kurallarına göre oluşturulur. Örneğin new Intl.DateTimeFormat('tr-TR').format(new Date()) ifadesi, geçerli tarihi Türkçe biçimde üretir. Saat de gerekiyorsa dateStyle ve timeStyle seçeneklerini ekleyebilirsiniz.

Türkçe tarih biçimlendirme​


Aşağıdaki örnekte tarih girdisi oluşturuluyor, ardından gün, ay ve yıl Türkçe biçimde gösteriliyor:

JavaScript: 
const tarih = new Date('2026-10-25T14:30:00');

const tarihMetni = new Intl.DateTimeFormat('tr-TR', {
  dateStyle: 'long'
}).format(tarih);

console.log(tarihMetni);

Bu kodun yerel saat dilimine göre üreteceği sonuç yaklaşık olarak 25 Ekim 2026 biçimindedir. Buradaki dateStyle: 'long' seçeneği ay adını yazıyla gösterir. Daha kısa bir sonuç için dateStyle: 'short' kullanabilirsiniz; bu durumda çıktı 25.10.2026 gibi sayısal bir biçime dönüşür.

Saat bilgisini de göstermek için biçimlendirme seçeneklerine timeStyle ekleyin:

JavaScript: 
const tarih = new Date('2026-10-25T14:30:00');

const tarihVeSaat = new Intl.DateTimeFormat('tr-TR', {
  dateStyle: 'long',
  timeStyle: 'short'
}).format(tarih);

console.log(tarihVeSaat);

Bu kullanım 25 Ekim 2026 14:30 benzeri bir çıktı üretir. Kesin saat, çalıştırılan ortamın saat dilimine ve tarih değerinin nasıl oluşturulduğuna bağlıdır.

Gün, ay ve yılı ayrı ayrı kontrol etmek​


Çıktının biçimini daha ayrıntılı belirlemek isterseniz day, month ve year seçeneklerini kullanabilirsiniz:

JavaScript: 
const tarih = new Date('2026-10-25T14:30:00');

const sonuc = new Intl.DateTimeFormat('tr-TR', {
  day: '2-digit',
  month: 'long',
  year: 'numeric'
}).format(tarih);

console.log(sonuc);

Bu örnekte gün iki basamaklı, ay yazıyla ve yıl dört basamaklı gösterilir. Ayı da sayısal yapmak için month: '2-digit' kullanabilirsiniz. Ayın başında sıfır istemiyorsanız month: 'numeric' seçeneğini tercih edin.

Intl.DateTimeFormat ile yaygın seçenekler şu şekilde ayrılır:
KullanımÖrnek seçenekSonuç türü
Kısa tarihdateStyle: 'short'25.10.2026 gibi sayısal tarih
Okunabilir tarihdateStyle: 'long'25 Ekim 2026
Tam tarihdateStyle: 'full'Pazar, 25 Ekim 2026
Saat eklemetimeStyle: 'short'14:30 gibi kısa saat
Özel parçalarday, month, yearGün, ay ve yılı ayrı kontrol etme
Tabloda yer alan dateStyle ve timeStyle seçeneklerini aynı biçimlendirme çağrısında kullanabilirsiniz. Ancak bir çağrıda stil seçeneklerini kullanırken aynı parçaları ayrıca, örneğin hem dateStyle: 'long' hem de year: 'numeric' şeklinde karıştırmayın; bunun yerine ya hazır stili ya da parçalı seçenekleri tercih edin.

toLocaleDateString() ile kısa kullanım​


Sadece tarihi biçimlendirecekseniz toLocaleDateString() daha kısa bir yazım sağlar:

JavaScript: 
const tarih = new Date('2026-10-25T14:30:00');

console.log(tarih.toLocaleDateString('tr-TR', {
  day: '2-digit',
  month: 'long',
  year: 'numeric'
}));

Bu yöntem de 25 Ekim 2026 benzeri bir sonuç verir. Birden fazla tarihi aynı biçimde gösterecekseniz Intl.DateTimeFormat nesnesini bir kez oluşturup tekrar kullanmak daha düzenli olabilir:

JavaScript: 
const bicimlendir = new Intl.DateTimeFormat('tr-TR', {
  dateStyle: 'medium'
});

const tarihler = [
  new Date('2026-10-25T14:30:00'),
  new Date('2026-11-03T09:15:00')
];

const sonuclar = tarihler.map(tarih => bicimlendir.format(tarih));
console.log(sonuclar);

Bu kod her tarihi aynı yerel ayarla biçimlendirir. format() yalnızca metin üretir; tarih nesnesinin kendisini değiştirmez ve veritabanındaki değeri yeniden yazmaz.

Tarih girdisinde saat dilimi hatasını önleme​


En sık karıştırılan nokta, tarih metninin saat dilimi belirtilmeden oluşturulmasıdır. 2026-10-25 gibi yalnızca tarih içeren bir ISO metni JavaScript tarafından UTC tarihi olarak yorumlanabilir. Daha sonra yerel saate çevrilirken bazı saat dilimlerinde tarih bir gün önce görünebilir.

Saat dilimi belli olmayan bir yerel tarih kullanıyorsanız, bileşenleri sayısal olarak vermek daha kontrollü olabilir:

JavaScript: 
const tarih = new Date(2026, 9, 25, 14, 30);

console.log(new Intl.DateTimeFormat('tr-TR', {
  dateStyle: 'long',
  timeStyle: 'short'
}).format(tarih));

Burada ay parametresi 9 olarak verilmiştir; JavaScript'te aylar 0 ile başladığı için 9, ekim ayıdır. Bu kullanım tarihi çalıştırılan ortamın yerel saat diliminde oluşturur.

Bir API'den UTC bilgisi geliyorsa saat dilimini açıkça belirterek aynı sonucu farklı cihazlarda da gösterebilirsiniz:

JavaScript: 
const tarih = new Date('2026-10-25T14:30:00Z');

const sonuc = new Intl.DateTimeFormat('tr-TR', {
  dateStyle: 'long',
  timeStyle: 'short',
  timeZone: 'Europe/Istanbul'
}).format(tarih);

console.log(sonuc);

Z, girdinin UTC olduğunu belirtir; timeZone ise gösterimin hangi saat dilimine çevrileceğini belirler. Kullanıcıya kendi yerel saatini göstermek istiyorsanız timeZone değerini sabitlemek yerine tarayıcının yerel ayarını kullanabilirsiniz. Sunucular arası tutarlı rapor üretmek istiyorsanız saat dilimini açıkça seçmek daha güvenlidir.

Hangi yöntemi seçmelisiniz?​


Kullanıcı arayüzünde okunabilir tarih veya saat göstermek için Intl.DateTimeFormat kullanın. Tek bir tarih alanını hızlıca yazdırmak için toLocaleDateString() yeterlidir. Tarihi sıralama, API'ye gönderme veya veritabanında saklama amacıyla biçimlendirilmiş Türkçe metni kullanmayın; bu amaçlar için ISO 8601 gibi makine tarafından işlenebilir bir değer saklayıp yalnızca ekranda biçimlendirin.

Örneğin 25 Ekim 2026 kullanıcı için anlaşılırdır ancak JavaScript'in tarih sıralaması için güvenilir bir veri biçimi değildir. Sıralama gerektiğinde tarih nesnesini veya 2026-10-25T14:30:00Z gibi saat dilimi belirtilmiş ham değeri koruyun; Intl.DateTimeFormat sonucunu yalnızca sunum katmanında üretin.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)