Logo

Eleventy'de Tarih/Saat Formatını Değiştirme

6 Nisan 2021
4 dk okuma
11ty js ssg
eleventy-de-tarih-saat-formatini-degistirme

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”
timeZone Saat 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.