Phân tích cú pháp, xác thực, thao tác và hiển thị ngày và giờ trong JavaScript với Day.js
Với bản phát hành mới nhất cách đây gần một năm, bản commit mới nhất hơn 6 tháng trước và hàng trăm lỗi mở và yêu cầu kéo, có vẻ như Moment.js đang chậm lại và đã đến lúc mua sắm các giải pháp thay thế được duy trì tích cực hơn. Chèn Day.js, một thư viện ngày và giờ tối giản có trọng lượng 2kB cung cấp API tương thích với Moment.js để dễ dàng chuyển đổi.
Bắt đầu với Day.js
Để bắt đầu với Day.js trong dự án Node.js của bạn, chỉ cần thêm phần phụ thuộc bằng npm hoặc yarn :
$ npm install dayjs --save
# or
$ yarn add dayjs
Sau đó, chỉ cần đưa nó vào tập lệnh của bạn:
const dayjs = require('dayjs');
Day.js cũng hoạt động trong các trình duyệt hiện đại và có thể được tự lưu trữ hoặc được bao gồm bởi một nhà cung cấp CDN như cdnjs .
Ngày và giờ phân tích cú pháp
Phân tích cú pháp chuỗi ngày và giờ thành đối tượng Day.js rất dễ dàng và hỗ trợ chuỗi, số, đối tượng Date JavaScript root cũng như các đối tượng Day.js khác:
let date = dayjs('2019-12-27');
date = dayjs('20191227');
date = dayjs(new Date(2019, 11, 27));
date = dayjs(day('2019-12-27'));
Bạn thậm chí có thể bỏ qua hoàn toàn chuỗi để mặc định đối tượng Day.js thành ngày và giờ hiện tại:
date = dayjs();
Xác thực Ngày và Giờ
Khi bạn đã phân tích cú pháp ngày và giờ với Day.js, bạn có thể tận dụng phương thức isValid() để xác định xem những gì bạn đã chuyển vào có thực sự là thứ mà Day.js có thể phân tích hay không:
dayjs('2019-12-27').isValid(); // true
dayjs('tomorrow').isValid(); // false
Ngoài ra, nếu bạn cố gắng hiển thị một đối tượng Day.js được cung cấp với một ngày không thể phân tích cú pháp, kết quả trả về sẽ là Invalid Date .
Hiển thị Ngày và Giờ
Phương thức .format() cho phép ta lấy đối tượng Day.js và chuyển đổi nó thành một chuỗi mà con người có thể đọc được. Nó hỗ trợ tập hợp các biến ngày và giờ phổ biến của bạn, như YYYY cho cả năm, MM và mm cho tháng và phút tương ứng.
Đối với những trường hợp bạn muốn bao gồm văn bản bổ sung mà bạn không muốn chuyển đổi thành một phần ngày hoặc giờ, bạn có thể "ôm" chuỗi bằng dấu ngoặc [ và ] :
dayjs().format('YYYY-MM-DD [at] HH:mm:ss');
dayjs().format('HH:mm:ss [on] YYYY-MM-DD');
Thao tác Ngày và Giờ
Trong phần trước, ta đã cố gắng chuyển chuỗi tomorrow và nó được coi là ngày không hợp lệ. Để có thể lấy ngày và giờ cho ngày mai, ta có thể bắt đầu với ngày và giờ hôm nay và thêm một ngày vào đó:
dayjs().add(1, 'day').format('YYYY-MM-DD');
Ngoài việc thêm day , bạn cũng có thể thêm month , year và thậm chí cả các khoảng thời gian dựa trên thời gian như hour và minute :
dayjs().add(1, 'hour').format('YYYY-MM-DD HH:mm:ss');
dayjs().add(30, 'minute').format('YYYY-MM-DD HH:mm:ss');
dayjs().add(3, 'month').format('YYYY-MM-DD HH:mm:ss');
dayjs().add(3, 'year').format('YYYY-MM-DD HH:mm:ss');
Bạn thậm chí có thể chuỗi nó để làm những việc như thêm nhiều khoảng thời gian:
dayjs().add(1, 'hour').add(30, 'minute').format('YYYY-MM-DD HH:mm:ss');
Bạn đừng lo lắng, cũng có một phương pháp trừ:
dayjs().subtract(4, 'hour').format('YYYY-MM-DD HH:mm:ss');
So sánh ngày và giờ
Một trong những nhiệm vụ phức tạp hơn thường xuyên xuất hiện trong quá trình phát triển là so sánh ngày và giờ. Day.js giúp bạn dễ dàng cung cấp các phương thức trợ giúp như isBefore() và isAfter() :
const date1 = dayjs('2020-01-1');
const date2 = dayjs();
if (date1.isBefore(date2)) {
console.log('Date 1 falls before date 2');
}
else if (date1.isAfter(date2)) {
console.log('Date 2 falls before date 1');
}
else if (date1.isSame(date2)) {
console.log('Date 1 and date 2 are the same');
}
Kết luận
Với giao diện quen thuộc và bảo trì tích cực (ngay cả trong những ngày nghỉ), Day.js dường như là một sự thay thế tuyệt vời cho Moment.js.
Hãy thử cho dự án tiếp theo của bạn, tôi biết tôi sẽ làm được.
Các tin liên quan
Cách bắt đầu với API hiệu suất JavaScript2019-12-25
Xem xét tất cả 13 bẫy proxy JavaScript
2019-12-19
Khám phá phương thức indexOf cho chuỗi và mảng trong JavaScript
2019-12-17
Thao tác DOM trong JavaScript với innerText và innerHTML
2019-12-14
Cách gói một gói JavaScript Vanilla để sử dụng trong React
2019-12-12
Cách phát triển một trình tải lên tệp tương tác với JavaScript và Canvas
2019-12-12
Cách sử dụng map (), filter () và Reduce () trong JavaScript
2019-12-12
Giải thích về lập trình chức năng JavaScript: Ứng dụng một phần và làm xoăn
2019-12-12
Giới thiệu về Closures và Currying trong JavaScript
2019-12-12
Bắt đầu với các hàm mũi tên ES6 trong JavaScript
2019-12-12
