date-fns một thư viện giúp bạn đơn giản hoá khi làm việc Date. Có thể bạn đang làm một task liên quan đến việc hiển thị thời gian đăng bài hay là thời gian comment của user v..v.. với vaniila javascript sẽ mất khá nhiều dòng code để lấy được ra ngày, giờ chi tiết và rồi lại phải cộng chuỗi để ra được kết quả mong muốn. Nhưng nếu sử dụng date-fns sẽ giúp bạn xử lý những task này một cách nhanh chóng và cực kì hiệu quả.
Hãy cùng bắt đầu thôi nào !
1. Cài đặt: Lựa chọn một trong hai cách dưới đây để add date-fns vào project hiện tại của bạn
npm install date-fns --save
hoặc
yarn add date-fns
2. Cách sử dụng:
import các hàm phù hợp với các task chúng ta cần giải quyết. Vì date-fns hỗ trợ toàn cầu hoá (I18n) giống moment, và các ví dụ trong bài viết này mình sẽ import & sử dụng locale của Việt Nam
import vi from 'date-fns/locale/vi
3. Một số hàm định dạng
formatkết quả trả về là định dạng ngày tháng tuỳ biến. Cụ thể khi khởi tạo date hiện tại với syntax lànew Date()kết quả trả về là một chuỗi chứa nhiều thông tin về date time, trong thực tế đôi lúc chỉ cần lấy ra ngày tháng năm.Nếu code thuần với JS có thể điều này sẽ làm cho code bạn bị dài dòng thay vào đó sử dụng
formatcủa date-fns sẽ ngắn gọn hơn nhiều.- Cú pháp:
format(date, format, [options])
- Cú pháp:
date: thời gian được khởi tại vớinew Date()format: string chứa các token là định dạng của kết quả trả về.[options]: object chứa properties nhưlocale,weekStartsOne
// Import hàm format
import {format} from 'date-fns/format'
// VD1: Hiện thị ngày tháng năm được phân cách nhau bởi dấu "/"
const dateFormat = format(new Date(), "dd/MM/yyyy")
console.log(dateFormat) // -> 12/10/2021
// VD2: Hiển thị thứ ngày tháng năm theo định dạng tiếng Việt
const dateFormatVietNam = format(
new Date(),
"PPPP",
{locale: vi}
);
console.log(dateFormatVietNam) // -> Thứ Ba, ngày 12 tháng 10 năm 2021
formatDistancekết quả trả về mộtstringkhoảng thời gian của 2 mốc thời gian.- Cú pháp:
formatDistance(date1, date2, [options])
- Cú pháp:
date1,date2: mốc thời gian cho sẵn[options]: object cũng có một số properties nhưlocale,addSuffixđể kết quả của hàm trả vềdate2đúng trước hay saudate1
import {formatDistance} from 'date-fns'
const compareTwoDate = formatDistance(
new Date(2020,0,1),
new Date(2021,0,1),
{ locale: vi, addSuffix: true }
);
console.log(compareTwoDate) // -> khoảng 1 năm trước
// Khi loại bỏ addSuffix trong [options]
console.log(compareTwoDate) // -> khoảng 1 năm
formatDistanceToNowkết quả trả vềstringlà một khoảng thời gian được tính từ mốc thời gian có trước cho đến hiện tại.- Cú pháp:
formatDistance(date, [options])
- Cú pháp:
date: mốc thời gian
import {formatDistance} from 'date-fns'
// VD1: Hiển thị thời gian khi bấm gửi bình luận
const distanceToNow = formatDistanceToNow(
new Date(),
{ locale: vi,addSuffix: true}
);
console.log(distanceToNow) // -> dưới 1 phút trước
// VD2: Hiển thị thời gian của một mốc hời gian cho trước
const distanceToNow2 = formatDistanceToNow(
new Date(2020, 0, 1),
{ locale: vi, addSuffix: true}
);
console.log(distanceToNow2) // -> gần 2 năm trước
4. Một số hàm tính toán
add&sub: kết quả trả vềdate objectlà mốc thời gian cụ thể được cộng thêm hoặc bị trừ đi.- Cú pháp:
add(date, duration)&sub(date, duration)
- Cú pháp:
date: Mốc thời gianduration: object chứa thời gian trừ đi
// VD: Bạn có một ngày cho trước & muốn xác định chính xác mốc thời gian trong tương lai dựa theo thời gian tuỳ chỉnh.
const addDate = add(new Date(2021, 0, 1), {
years: 1,
months: 1,
weeks: 1,
days: 10,
hours: 1,
minutes: 10,
seconds: 0,
});
console.log(addDate);
// -> Fri Feb 18 2022 01:10:00 GMT+0700 (Indochina Time)
console.log(format(addDate, "dd/MM/yyyy hh:mm"));
// -> 18/02/2022 01:10
console.log(format(addDate, "PPPP hh:mm", {locale: vi})
// -> Thứ Sáu, ngày 18 tháng 02 năm 2022 01:10
const subDate = sub(new Date(2021, 0, 1), {
years: 1,
months: 1,
weeks: 1,
days: 10,
hours: 1,
minutes: 10,
seconds: 0,
});
console.log(subDate);
// -> Wed Nov 13 2019 22:50:00 GMT+0700 (Indochina Time)
console.log(format(subDate, "dd/MM/yyyy hh:mm"));
// -> 13/11/2019 10:50
console.log(format(subDate, "PPPP hh:mm", { locale: vi }));
// -> Thứ Tư, ngày 13 tháng 11 năm 2019 10:50
closeTo: cho mộtarraychứa các mốc thời gian & một mốc thời gian cụ thể. Kết quả trả về là mốc thời gian trong array có kết quả gần nhất với với mốc thời gian cụ thể cho trước.- Cú pháp:
closeTo(dateToCompare, datesArray)
- Cú pháp:
dateToCompare: mốc thời gian cụ thể.datesArray: mảng chứa các mốc thời gian.
// VD: Cho một mảng chứa các ngày lễ trong năm 2021, hãy xác định ngày lễ gần với thời gian hiện tại nhất.
const holidayDatesArray = [
new Date(2021, 0, 1),
new Date(2021, 2, 8),
new Date(2021, 3, 30),
new Date(2021, 4, 1),
new Date(2021, 8 , 2),
new Date(2021, 9, 20),
new Date(2021, 10, 20),
new Date(2021, 11, 24)
];
const closestDate = closestTo(new Date(), holidayDatesArray);
// -> Wed Oct 20 2021 00:00:00 GMT+0700 (Indochina Time)
5. Một số hàm kiểm tra
isDate: kết quả trả về có dạngbooleankiểm tra có phải một ngày hợp lệ hay không.
// VD:
const result = isDate('2014-02-31') // -> false
const result2 = isDate(new Date()) // -> true
const result3 = isDate(new Date(2022,0,1)) // -> true
isAfter: kiểm tra một ngày có sau một ngày khác hay không.isBefore: kiểm tra một ngày có trước một ngày khác hay không.
// VD: Xác định
const checkAfterDate = isAfter(new Date(2022, 0, 1), new Date(2021, 0, 1));
console.log(checkAfterDate); // true
const checkBeforeDate = isBefore(new Date(2022, 0, 1), new Date(2021, 0, 1));
console.log(checkBeforeDate); // false
Tại đây mình mới chỉ demo được một số hàm hay được sử dụng tới. Ngoài ra còn rất rất nhiều các hàm xử lý chi tiết khác tại document chính thức date-fns.org.
Bạn có thể đào sâu tìm hiểu thêm nhiều hàm khác để phục vụ các task trong project và hãy chia sẻ lại những gì bạn đã khám phá được để giúp các đồng môn có thể bớt chút công sức trong quá trình làm việc. Và nếu bài viết này có ích với bạn hãy góp cho mình 1 sao nhé !
Bình luận