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.