Làm việc với ngày bằng cách sử dụng date-fns trong JavaScript

Spread the love

Làm việc với ngày tháng không phải là một nhiệm vụ dễ dàng. Tuy nhiên, gói date-fns giúp bạn dễ dàng làm việc với ngày tháng trong JavaScript.

Chúng ta hãy đi sâu vào ngày-tháng của gói để làm cho cuộc sống của chúng ta dễ dàng hơn trước. Gói date-fns nhẹ.

Cài đặt gói

Chúng tôi cần thiết lập dự án với npm để làm việc với gói của bên thứ ba. Hãy nhanh chóng xem các bước để hoàn thành thiết lập của chúng tôi.

Tôi giả sử bạn đã cài đặt NodeJS hoặc IDE để thực hành điều này.

  • Điều hướng đến thư mục mong muốn mà bạn muốn làm việc.
  • Chạy lệnh npm init để khởi tạo dự án.
  • Trả lời tất cả các câu hỏi dựa trên sở thích của bạn.
  • Bây giờ, hãy cài đặt date-fns bằng lệnh dưới đây
npm install date-fns
  • Tạo một tệp có tên dateFunctions.js

Bây giờ, chúng ta đã sẵn sàng chuyển sang phần date-fns của gói. Chúng ta hãy đi và tìm hiểu một số phương pháp cần thiết từ gói.

isValid

Tất cả các ngày đều không hợp lệ.

Ví dụ: không có ngày nào như 2021-02-30. Làm thế nào chúng ta có thể kiểm tra xem ngày đó có hợp lệ hay không?

Phương thức isValid từ gói date-fns sẽ giúp chúng ta tìm ra ngày đã cho có hợp lệ hay không.

Kiểm tra xem mã sau có hoạt động tốt hay không với tính hợp lệ của ngày tháng.

const { isValid } = require("date-fns");

console.log(isValid(new Date("2021, 02, 30")));

Nếu bạn thực thi mã trên, thì bạn sẽ thấy ngày 30 tháng 2 năm 2021 là hợp lệ. Ồ! Nó không thể.

  26 phần mềm tạo mô hình 3D tốt nhất

Tại sao nó lại xảy ra?

JavaScript chuyển đổi ngày bổ sung của tháng 2 thành ngày 1 tháng 3 năm 2021 là một ngày hợp lệ. Để xác nhận, hãy in Ngày mới (“2021, 02, 30”) vào bảng điều khiển.

console.log(new Date("2021, 02, 30"));

Gói date-fns cung cấp một phương thức gọi là phân tích cú pháp để giải quyết vấn đề này. Phương thức phân tích cú pháp phân tích ngày bạn đã cung cấp và trả về kết quả chính xác.

Hãy xem đoạn mã dưới đây.

const { isValid, parse } = require("date-fns");

const invalidDate = parse("30.02.2021", "dd.MM.yyyy", new Date());
const validDate = parse("25.03.2021", "dd.MM.yyyy", new Date());

console.log(isValid(invalidDate));
console.log(isValid(validDate));

định dạng

Một trong những cách sử dụng cơ bản khi làm việc với ngày tháng là định dạng chúng theo ý muốn. Chúng tôi định dạng ngày ở các định dạng khác nhau bằng cách sử dụng phương pháp định dạng từ gói date-fns.

Định dạng ngày là 23-01-1993, 1993-01-23 10:43:55, Thứ Ba, 23 tháng 1, 1993, v.v., Chạy đoạn mã sau để lấy ngày tương ứng theo các định dạng đã đề cập.

const { format } = require("date-fns");

console.log(format(new Date(), "dd-MM-yyyy"));
console.log(format(new Date(), "dd/MM/yyyy HH:mm:ss"));
console.log(format(new Date(), "PPPP"));

Bạn có thể tìm thấy danh sách đầy đủ các định dạng nơi đây.

addDays

Phương thức addDays được sử dụng để đặt thời hạn sau một số ngày.

Đơn giản, chúng ta có thể thêm ngày vào bất kỳ ngày nào để có được ngày trong ngày sau một số ngày. Nó có nhiều ứng dụng.

Giả sử bạn có sinh nhật sau X ngày và bạn bận rộn vào những ngày đó. Bạn có thể không nhớ ngày sinh nhật trong lịch trình bận rộn của mình. Bạn chỉ cần sử dụng phương thức addDays để thông báo cho bạn về sinh nhật sau X ngày. Có mã.

const { format, addDays } = require("date-fns");

const today = new Date();

// birthday after 6 days
const birthday = addDays(today, 6);

console.log(format(today, "PPPP"));
console.log(format(birthday, "PPPP"));

Tương tự như phương thức addDays có các phương thức khác như addHours, subHours, addMinutes, subMinutes, addSeconds, subSeconds, subDays, addWeeks, subWeeks, addYears, subYears, v.v., Bạn có thể dễ dàng đoán được chức năng của các phương thức với tên của chúng.

  Cách kích hoạt Cricket trên điện thoại

Thử chúng ra.

formatDistance

Viết mã để so sánh ngày từ đầu là một cơn ác mộng. Tại sao chúng ta vẫn so sánh ngày tháng?

Có rất nhiều ứng dụng mà bạn đã thấy so sánh ngày tháng. Nếu bạn sử dụng các trang web mạng xã hội, sẽ có một khẩu hiệu đề cập đến 1 phút trước, 12 giờ trước, 1 ngày trước, v.v., Ở đây, chúng tôi sử dụng so sánh ngày từ ngày và giờ của bài đăng đến ngày và giờ hiện tại.

Phương thức formatDistance cũng làm điều tương tự. Nó trả về khoảng cách giữa hai ngày nhất định.

Hãy viết chương trình để tìm tuổi của bạn.

const { formatDistance } = require("date-fns");

const birthday = new Date("1956, 01, 28");
const presentDay = new Date();

console.log(`Age: ${formatDistance(presentDay, birthday)}`);

eachDayOfInterval

Giả sử bạn phải tìm tên và ngày trong X ngày tiếp theo. Phương thức eachDayOfInterval giúp chúng ta tìm các ngày giữa ngày bắt đầu và ngày kết thúc.

Hãy cùng tìm hiểu 30 ngày tiếp theo kể từ hôm nay.

const { addDays, eachDayOfInterval, format } = require("date-fns");

const presentDay = new Date();
const after30Days = addDays(presentDay, 30);

const _30Days = eachDayOfInterval({ start: presentDay, end: after30Days });

_30Days.forEach((day) => {
   console.log(format(day, "PPPP"));
});

tối đa và tối thiểu

Phương thức max và min lần lượt tìm ngày tối đa và tối thiểu trong số các ngày đã cho. Các phương thức trong date-fns rất quen thuộc và dễ đoán chức năng của các phương thức đó. Hãy viết một số mã.

const { min, max } = require("date-fns");

const _1 = new Date("1990, 04, 22");
const _2 = new Date("1990, 04, 23");
const _3 = new Date("1990, 04, 24");
const _4 = new Date("1990, 04, 25");

console.log(`Max: ${max([_1, _2, _3, _4])}`);
console.log(`Min: ${min([_1, _2, _3, _4])}`);

isEqual

Bạn có thể dễ dàng đoán được chức năng của phương thức isEqual. Như bạn nghĩ, phương pháp isEqual được sử dụng để kiểm tra xem hai ngày có bằng nhau hay không. Xem mã mẫu bên dưới.

const { isEqual } = require("date-fns");

const _1 = new Date();
const _2 = new Date();
const _3 = new Date("1900, 03, 22");

console.log(isEqual(_1, _2));
console.log(isEqual(_2, _3));
console.log(isEqual(_3, _1));

Sự kết luận

Nếu chúng ta nói về mọi phương thức trong gói date-fns, thì sẽ mất nhiều ngày để hoàn thành. Cách tốt nhất để học bất kỳ gói nào là làm quen với các phương pháp thiết yếu từ nó và sau đó đọc tài liệu để biết thêm thông tin. Áp dụng cùng một kịch bản cho gói date-fns.

  15 khóa học Udemy mới và thịnh hành nhất năm 2022

Bạn đã học được các phương pháp thiết yếu trong hướng dẫn này. Tìm kiếm cách sử dụng cụ thể trong tài liệu hoặc xem xét tham gia các khóa học trực tuyến như JavaScript, jQuery và JSON.

Mã hóa vui vẻ 👨‍💻

x