Eleventy’de tarih formatını Türkçe ve istediğimiz biçimde gösterebilmek için filtreler kullanabiliyoruz. Bunun için JavaScript’teki toLocaleString() metodunu kullanıyoruz.

toLocaleString Metodu 🔗

toLocaleString() için iki parametremiz var; biri options diğeri de locales. .toLocaleString(locales, options) şeklinde kullanılıyor. Bizim durumumuzda locales kısmı tr-TR oluyor. Options için ise tarih ve saat biçimini değiştirebilmek adına bolca seçenek var.

OptionsAlabileceği Değerler
dateStyle“full”, “long”, “medium”, “short”
timeStyle“full”, “long”, “medium”, “short”
timeZoneSaat dilimi
hour12“true”, “false”
hourCycle“h11”, “h12”, “h23”, “h24”
weekday“long”, “short”, “narrow”
year“2-digit”, “numeric”
month“2-digit”, “long”, “narrow”, “numeric”, “short”
day“2-digit”, “numeric”
hour“2-digit”, “numeric”
minute“2-digit”, “numeric”
second“2-digit”, “numeric”
timeZoneName“long”, “short”

Örneklerin hepsi için locales değeri olarak tr-TR kullanılmıştır.

timeZone 🔗

Bu ayar saat dilimini belirlemek için kullanılıyor. Bizim için buna verilecek değer Europe/Istanbul olacak.

dateStyle 🔗

Tarih stilini belirlemek için kullanılır.

  • full: 6 Nisan 2021 Salı
  • long: 6 Nisan 2021
  • medium: 6 Nis 2021
  • short: 6.04.2021

timeStyle 🔗

Saat stilini belirlemek için kullanılır.

  • full: 17:01:34 GMT+03:00
  • long: 17:01:44 GMT+3
  • medium: 17:01:56
  • short: 17:02

hour12 🔗

12 saat veya 24 saat formatı için kullanılır. true ile 12 saat formatı, false ile 24 saat formatı kullanılır.

  • true: 5:08:30
  • false: 17:08:30

hourCycle 🔗

Gece yarısı başlangıçları.

  • h11: 12:00 ÖS
  • h12: 00:00 ÖS
  • h23: 00:00
  • h24: 24:00

weekday 🔗

Haftanın günü stilini belirlemek için kullanılır.

  • long: Salı
  • short: Sal
  • narrow: S

year 🔗

Yıl stilini belirlemek için kullanılır.

  • 2-digit: 21
  • numeric: 2021

month 🔗

Ay stilini belirlemek için kullanılır.

  • 2-digit: 04
  • long: Nisan
  • narrow: N
  • numeric: 4
  • short: Nis

day 🔗

Gün stilini belirlemek için kullanılır.

  • 2-digit: 06
  • numeric: 6

hour 🔗

Saat stilini belirlemek için kullanılır.

  • 2-digit: 05
  • numeric: 5

minute 🔗

Dakika stilini belirlemek için kullanılır.

  • 2-digit: 05
  • numeric: 5

second 🔗

Saniye stilini belirlemek için kullanılır.

  • 2-digit: 05
  • numeric: 5

timeZoneName 🔗

Saat dilimi stilini belirlemek için kullanılır.

  • long: GMT+03:00
  • short: GMT+3

Eleventy Filtresi 🔗

Eleventy’de bunu nasıl kullanacağımıza gelirsek; öncelikte bir filtre oluşturmamız gerekiyor.

  eleventyConfig.addFilter("formatTarih", (dateObj) => {
const options = {
timeZone: "Europe/Istanbul",
year: "numeric",
month: "long",
day: "2-digit",
hour12: false,
hour: '2-digit',
minute: '2-digit'
};
return new Date(dateObj).toLocaleString("tr-TR", options);
});

Yukarıdaki ayarlarda;

timeZone: "Europe/Istanbul" ile saat dilimimizi,
year: "numeric" ile yılı 4 basamaklı bir şekilde yazmasını,
month: "long" ile ayı uzun haliyle (Örn. Nisan) yazmasını,
day: "2-digit" ile günü iki basamaklı sayı olarak yazmasını,
hour12: false ile saati 12lik değil 24 saatlik olarak yazmasını,
hour: '2-digit' ile saati iki basamaklı yazmasını,
minute: '2-digit' ile de dakikayı iki basamaklı yazmasını sağlıyoruz.

Tabi siz kullanımınıza göre yukarıdaki ayarları tablodakilere göre değiştirebilirsiniz. Ben kendi kullandığım filtreyi yazdım.

Kullanımıysa oldukça basit. Normalde {{ date }} olarak kullanacağımız tarihi aşağıdaki gibi kullanıyoruz.

{{ date | formatTarih }}

Böylelikle tarihimiz Tue Apr 06 2021 17:13:05 GMT+0000 (Coordinated Universal Time) olarak değil 06 Nisan 2021 20:13 olarak yazılıyor.