# ✨ useDate
useDate
fonksiyonu bileşenlerde tarih işlemlerini kolayca yaptığımız bir fonksiyondur.
# 🏪 Kullanım
useDate
fonksiyonunun import edilmesi.
import { useDate } from 'vue-composable-utils';
const { format, timeAgo, getDate, utc, timezone, difference } = useDate();
# 🚀 Example.vue
Format: Wednesday, October 13, 2021 11:00 AM
TimeAgo: 6 months ago
GetDate: 13
Difference: 1226
Utc: Wednesday, October 13, 2021 11:00 AM
Timezone: 10/13/2021 7:00 AM
<template>
<div>
<p><b>Format: </b>{{ dateFormat }}</p>
<p><b>TimeAgo: </b>{{ timeAgoFormat }}</p>
<p><b>GetDate: </b>{{ getDateFormat }}</p>
<p><b>Difference: </b>{{ differenceFormat }}</p>
<p><b>Utc: </b>{{ utcFormat }}</p>
<p><b>Timezone: </b>{{ timezoneFormat }}</p>
</div>
</template>
<script>
import { useDate } from "vue-composable-utils";
export default {
setup() {
const date = new Date();
// useDate fonksiyonu eklenir ve istenilen özellikleri kullanılır.
const { format, timeAgo, getDate, utc, timezone, difference } = useDate();
const dateFormat = format(date, 'LLLL');
const timeAgoFormat = timeAgo(date, '2021-04-07:23:00');
const getDateFormat = getDate('date');
const differenceFormat = difference(date, '2018-06-05', 'day');
const utcFormat = utc(date, 'LLLL');
const timezoneFormat = timezone('2014-06-01 12:00', 'America/New_York', 'L LT');
return {
dateFormat,
timeAgoFormat,
getDateFormat,
differenceFormat,
utcFormat,
timezoneFormat,
langUnit,
};
};
};
</script>
# 🌟 Özellikler
# format() Fonksiyonu
Gönderilen tarihi formatlamak için kullanılır. 2 tane parametre alır. Birinci parametre olarak formatlanmak istenilen tarih. İkinci parametre ise format biçimi verilir.
const dateFormat = format(date, 'dddd'); // Cuma, 9 Nisan 2021 21:14
const dateFormat = format(date, 'YYYY'); // 2021
const dateFormat = format(date, 'MMM'); // Jan-Dec
Format | Output | Description |
---|---|---|
YY | 18 | Two-digit year |
YYYY | 2018 | Four-digit year |
M | 1-12 | The month, beginning at 1 |
MM | 01-12 | The month, 2-digits |
MMM | Jan-Dec | The abbreviated month name |
MMMM | January-December | The full month name |
D | 1-31 | The day of the month |
DD | 01-31 | The day of the month, 2-digits |
d | 0-6 | The day of the week, with Sunday as 0 |
dd | Su-Sa | The min name of the day of the week |
ddd | Sun-Sat | The short name of the day of the week |
dddd | Sunday-Saturday | The name of the day of the week |
H | 0-23 | The hour |
HH | 00-23 | The hour, 2-digits |
h | 1-12 | The hour, 12-hour clock |
hh | 01-12 | The hour, 12-hour clock, 2-digits |
m | 0-59 | The minute |
mm | 00-59 | The minute, 2-digits |
s | 0-59 | The second |
ss | 00-59 | The second, 2-digits |
SSS | 000-999 | The millisecond, 3-digits |
Z | +05:00 | The offset from UTC, ±HH:mm |
ZZ | +0500 | The offset from UTC, ±HHmm |
A | AM PM | |
a | am pm |
Yerelleştirilmiş formatların listesi
Format | İngilizce Yerel Ayarları | Örnek Çıktı |
---|---|---|
LT | h:mm A | 8:02 PM |
LTS | h:mm:ss A | 8:02:18 PM |
L | MM/DD/YYYY | 08/16/2018 |
LL | MMMM D, YYYY | August 16, 2018 |
LLL | MMMM D, YYYY h:mm A | August 16, 2018 8:02 PM |
LLLL | dddd, MMMM D, YYYY h:mm A | Thursday, August 16, 2018 8:02 PM |
l | M/D/YYYY | 8/16/2018 |
ll | MMM D, YYYY | Aug 16, 2018 |
lll | MMM D, YYYY h:mm A | Aug 16, 2018 8:02 PM |
llll | ddd, MMM D, YYYY h:mm A | Thu, Aug 16, 2018 8:02 PM |
Örnek
const dateFormat = format(date, 'LLLL'); // Friday, April 9, 2021 9:23 PM
const dateFormat = format(date, 'llll'); // Fri, Apr 9, 2021 9:23 PM
const dateFormat = format(date, 'll'); // Apr 9, 2021
# getDate() Fonksiyonu
const getDateFormat = getDate('date'); // date => Ayın Tarihi
Birim | Kısa gösterim | Açıklama |
---|---|---|
date | D | Ayın Tarihi |
day | d | Haftanın Günü (Pazar 0, Cumartesi 6) |
month | M | Ay (Ocak 0, Aralık 11) |
year | y | Yıl |
hour | h | Saat |
minute | m | Dakika |
second | s | Saniye |
milisecond | ms | Milisaniye |
# difference() Fonksiyonu
Belirlenen zaman birimine göre iki tarih arasındaki farkı verir.
3 parametre alır.
1- Birinci Tarih
2- İkinci Tarih
3- İki tarih arasındaki zaman birimi
// İki tarih arasında kaç gün olduğunu bildirir.
const differenceFormat = difference(date1, date2, 'day');
// İki tarih arasında kaç ay olduğunu bildirir.
const differenceFormat = difference(date1, date2, 'mount');
# utc() Fonksiyonu
2 parametre alır. Birinci parametre gönderilen tarih. İkinci parametre tarih birimi.
const utcFormat = utc(date, 'llll');
# timezone() Fonksiyonu
3 tane parametre alır.
1- Tarih
2- Lokasyon Location
3- Biçimlendirilmek istenilen birim Format Unit
const timezoneFormat = timezone('2014-06-01 12:00', 'Europe/Istanbul', 'LLLL');