Eleventy'de Tarih/Saat Formatını Değiştirme
yazıldı
•
2 dakika okuma süresi
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.
Options | Alabileceğ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.
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.
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.