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.