Thao tác và hiển thị ngày tháng gần như xuất hiện trong tất cả các ứng dụng JavaScript. Trình duyệt và NodeJS cung cấp lớp
// Prototype usage...
Date.prototype.addDays = Date.prototype.addDays || function[ days ] {
return this.setDate[ this.getDate[] + days ] && this;
};
// Namespace usage...
namespace.addDaysToDate = function[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
// Basic Function declaration...
function addDaysToDate[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
Hãy cùng Ehkoo xem qua những thư viện phổ biến nhất nhé
Lưu ý. Trong bài viết này Ehkoo sử dụng cụm từ "xử lý ngày tháng" nhưng bạn nên hiểu rõ là bao gồm xử lý ngày tháng và giờ giấc luôn nhé
khoảng khăc. js
npm install --save momentkhoảng khăc. js có thể là thư viện nổi tiếng và được sử dụng nhiều nhất khi nhắc đến xử lý ngày tháng trong JavaScript. khoảng khăc. js cho phép bạn phân tích và kiểm tra một chuỗi phải theo đúng định dạng ngày tháng hoặc không. Sau đó, bạn có thể chuyển từ chuỗi thành đối tượng ngày tháng và tiến trình thao tác trên chúng, chẳng hạn như thay đổi giờ/phút/giây/ngày/tháng/năm, cộng/trừ thời gian, tính khoảng cách giữa hai . , hoặc hiển thị ngày dưới dạng tương đối, thân thiện với người sử dụng
moment['2017-07-25', 'YYYY-MM-DD'] // Chuyển chuỗi thành đối tượng ngày tháng
moment[] // Lấy thời điểm hiện tại
moment[].startOf['month'] // Chuyển về ngày đầu tiên của tháng
moment[].add[7, 'days'] // Cộng thêm 7 ngày vào thời điểm hiện tại
const a = moment['2017-07-25', 'YYYY-MM-DD']
const b = moment['2017-07-10', 'YYYY-MM-DD']
// Tính khoảng cách giữa hai ngày theo phút
console.log[a.diff[b, 'minutes']
// Hiển thị ngày giờ dưới dạng tương đối
moment[].startOf['hour'].fromNow[] // 20 minutes agokhoảng khăc. js còn hỗ trợ bản địa hóa [i18n] với rất nhiều định dạng ngôn ngữ, bao gồm cả tiếng Việt
moment.locale['vi']
moment[].format['LL'] // 24 tháng 7 năm 2018
moment[].startOf['hour'].fromNow[] // 23 phút trướcMột trong những điểm yếu của khoảnh khắc. js không hỗ trợ bất biến tính toán, dễ dàng dẫn đến những lỗi không đáng có. các hạn định như
const today = moment[].startOf['day']
const tomorrow = today.add[1, 'day']
console.log[today.format[] === tomorrow.format[]] // true :|Cách sửa lỗi trên được sử dụng phương thức
// Prototype usage...
Date.prototype.addDays = Date.prototype.addDays || function[ days ] {
return this.setDate[ this.getDate[] + days ] && this;
};
// Namespace usage...
namespace.addDaysToDate = function[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
// Basic Function declaration...
function addDaysToDate[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
const today = moment[].startOf['day']
const tomorrow = today.clone[].add[1, 'day'] // Mất đi tính tự nhiên rồi :[
console.log[today.format[] === tomorrow.format[]] // falseSo with other library, moment. js has less than hiệu. Bên cạnh đó dung lượng của khoảnh khắc. js khá nặng [66. 4KB gzip] khi phải đính kèm tất cả các định dạng ngôn ngữ. Để giải quyết vấn đề này, bạn có thể sử dụng
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 10:30:00
dayjs
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
Với dung lượng chỉ 2KB gzip, dayjs là một lựa chọn tốt để thay thế khoảnh khắc. js. dayjs được thiết kế với các API tương tự như thời điểm. js, giúp việc chuyển đổi các dự án có sẵn trở nên dễ dàng hơn. Nhưng vậy với khoảnh khắc. js, dayjs có lợi thế hơn vì tính năng hỗ trợ bất biến, có nghĩa là một giá trị mới luôn luôn được tạo ra khi bạn tiến hành thao tác trên dữ liệu
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
dayjs cũng hỗ trợ i18n và bạn chỉ cần
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 10:30:00
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
Ngoài ra dayjs còn hỗ trợ các plugin, là những module giúp mở rộng tính năng cho thư viện. Có thể kể đến AdvancedFormat giúp mở rộng thêm các giá trị khi định dạng ngày tháng, RelativeTime giúp hiển thị thời gian thân thiện với người dùng, chẳng hạn như "3 ngày trước". Bạn có thể xem danh sách đầy đủ các plugin ở đây
ngày-fns
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
Mới nổi lên gần đây, date-fns tự hào là thư viện hỗ trợ toàn diện nhất về xử lý tháng trong JavaScript. Được thiết kế theo ý tưởng của hàm lập trình, với mỗi hàm chỉ có một mục đích duy nhất, date-fns cho phép bạn nhập chính xác các tính năng cần thiết để sử dụng. Điều này giúp việc kiểm soát dung lượng ứng dụng trở nên dễ dàng hơn. date-fns thao tác trên bất biến dữ liệu, hỗ trợ TypeScript và Flow, đồng thời cung cấp cho i18n bao gồm cả tiếng Việt
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
Việc mỗi hàm chỉ làm một công việc duy nhất vừa là điểm cộng đồng thời cũng là điểm trừ của date-fns, khi bạn phải gọi các hàm lồng nhau
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
Phiên bản 2 của date-fns sẽ hỗ trợ currying giúp giải quyết vấn đề trên
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
instadate
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
instadate chỉ có 3. 2KB tối thiểu gzip và quả quyết là thư viện xử lý ngày tháng nhanh từ 10 đến 1000 lần so với khoảnh khắc. js. instadate có thể chỉnh sửa hoặc so sánh hàng ngàn phép tính trong một giây. Ngoài ra, instadate hỗ trợ thao tác dữ liệu bất biến, giúp giảm thiểu khả năng xảy ra lỗi phát ban như thời điểm. js
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
Múi giờ
var dt = new Date[ 2014, 10, 1, 10, 30, 0 ];
console.log[ dt ]; // Sat Nov 01 2014 10:30:00
console.log[ dt.addDays[ 10 ] ]; // Tue Nov 11 2014 09:30:00
múi giờ chỉ có 2. 7KB nhưng hỗ trợ định dạng ngày tháng trong JavaScript ở tất cả các múi giờ theo tiêu chuẩn IANA
// Prototype usage...
Date.prototype.addDays = Date.prototype.addDays || function[ days ] {
return this.setDate[ this.getDate[] + days ] && this;
};
// Namespace usage...
namespace.addDaysToDate = function[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
// Basic Function declaration...
function addDaysToDate[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
múi giờ cũng hỗ trợ i18n với nhiều định dạng ngôn ngữ khác nhau
fecha
// Prototype usage...
Date.prototype.addDays = Date.prototype.addDays || function[ days ] {
return this.setDate[ this.getDate[] + days ] && this;
};
// Namespace usage...
namespace.addDaysToDate = function[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
// Basic Function declaration...
function addDaysToDate[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
fecha chỉ bao gồm hai tính năng hay được sử dụng nhiều nhất khi làm việc theo tháng. chuyển chuỗi thành đối tượng và hiển thị ngày tháng. fecha có dung lượng rất nhẹ, chỉ khoảng 2KB, đồng thời có hỗ trợ i18n
// Prototype usage...
Date.prototype.addDays = Date.prototype.addDays || function[ days ] {
return this.setDate[ this.getDate[] + days ] && this;
};
// Namespace usage...
namespace.addDaysToDate = function[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
// Basic Function declaration...
function addDaysToDate[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
s-ngày
// Prototype usage...
Date.prototype.addDays = Date.prototype.addDays || function[ days ] {
return this.setDate[ this.getDate[] + days ] && this;
};
// Namespace usage...
namespace.addDaysToDate = function[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
// Basic Function declaration...
function addDaysToDate[ date, days ] {
return date.setDate[ date.getDate[] + days ] && date;
};
s-date là một tiện ích siêu nhỏ [