HomeLập trìnhJavaScriptĐịnh dạng ngày...

Định dạng ngày JavaScript – Cách định dạng ngày trong JS


JavaScript là một trong ba công nghệ web cơ bản mà bạn sẽ sử dụng khi phát triển trang web hoặc ứng dụng web.

Khi tạo các trang web này, tại một thời điểm nào đó, bạn có thể sẽ cần sử dụng ngày vì một số lý do – chẳng hạn như hiển thị thời điểm nội dung nào đó được tải lên, lưu trữ, v.v.

Trong bài viết này, bạn sẽ tìm hiểu cách định dạng ngày tháng trong JavaScript và xem cách bạn có thể làm điều này với thư viện ngày tháng JavaScript phổ biến được gọi là moment.js.

Cách lấy ngày trong JavaScript

Trong JavaScript, bạn sử dụng một trong hai new Date() hoặc Date() constructor để lấy ngày của bạn (ngày hiện tại hoặc ngày cụ thể).

Các new Date() hàm tạo trả về một cái mới Date đối tượng, trong khi Date() hàm tạo trả về một chuỗi biểu diễn ngày và giờ hiện tại.

let stringDate = Date();
console.log(stringDate); // "Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time)"

let objectDate = new Date();
console.log(objectDate); // Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time)

Những ngày định dạng đầy đủ này bao gồm ngày, tháng, năm, phút, giờ và các thông tin khác mà bạn không cần mọi lúc.

Mối quan tâm chính của bạn là xem cách bạn có thể định dạng các giá trị ngày này để trả về ngày ở định dạng có thể đọc được, mà bạn có thể nhúng vào trang web của mình để mọi người hiểu.

Cách định dạng ngày trong JavaScript

Định dạng ngày tùy thuộc vào bạn và nhu cầu của bạn. Ở một số quốc gia, tháng đến trước ngày, sau đó là năm (22/06/2022). Ở những người khác, ngày đến trước tháng, sau đó là năm (22/06/2022), v.v.

Đọc thêm  TypeError Chỉ số chuỗi phải là số nguyên Lỗi Python [Solved]

Bất kể định dạng nào, bạn muốn chia nhỏ giá trị đối tượng ngày tháng và lấy thông tin cần thiết mà bạn muốn cho trang web của mình.

Điều này có thể thực hiện được với các phương thức ngày của JavaScript. Có nhiều phương pháp trong số này, nhưng vì bạn chỉ quan tâm đến ngày tháng trong bài viết này nên bạn sẽ chỉ cần ba phương pháp trong số đó:

  • getFullYear() – Bạn sẽ sử dụng phương pháp này để lấy năm ở dạng số có bốn chữ số (yyyy). Ví dụ, năm 2022.
  • getMonth() – Bạn sẽ sử dụng phương pháp này để lấy tháng dưới dạng số từ 0-11, với mỗi số đại diện cho các tháng từ tháng 1 đến tháng 12. Ví dụ, 2 sẽ là chỉ mục cho tháng 3 vì nó không lập chỉ mục dựa trên (có nghĩa là nó bắt đầu từ ).
  • getDate() – Bạn sẽ sử dụng phương pháp này để lấy ngày ở dạng số trong khoảng từ 1-31 (đây không phải là chỉ số, mà là giá trị ngày chính xác, do đó, nó bắt đầu từ 1 chứ không phải 0).

Ghi chú: Các phương pháp này chỉ có thể được áp dụng hoặc sẽ chỉ hoạt động với new Date() hàm tạo, trả về một đối tượng ngày tháng.

let objectDate = new Date();


let day = objectDate.getDate();
console.log(day); // 23

let month = objectDate.getMonth();
console.log(month + 1); // 8

let year = objectDate.getFullYear();
console.log(year); // 2022

bạn sẽ nhận thấy rằng 1 được thêm vào month giá trị trên. Điều này là do tháng là lập chỉ mục. Giá trị bắt đầu từ . Điều này có nghĩa là 7 sẽ có nghĩa là tháng tám thay vì 8.

Tại thời điểm này, bạn đã có thể trích xuất tất cả các giá trị ngày từ đối tượng ngày. Bây giờ bạn có thể sắp xếp chúng theo bất kỳ định dạng nào bạn muốn:

let format1 = month + "/" + day + "/" + year;
console.log(format1); // 7/23/2022

let format2 = day + "/" + month + "/" + year;
console.log(format2); // 23/7/2022

let format3 = month + "-" + day + "-" + year;
console.log(format3); // 7-23-2022

let format4 = day + "-" + month + "-" + year;
console.log(format4); // 23-7-2022

Ở phần trên, bạn đã nối các giá trị bằng toán tử cộng. Bạn cũng có thể sử dụng các mẫu chữ để nối:

let format1 = `${month}/${day}/${year}`;
console.log(format1); // 7/23/2022

let format2 = `${day}/${month}/${year}`;
console.log(format2); // 23/7/2022

let format3 = `${month}-${day}-${year}`;
console.log(format3); // 7-23-2022

let format4 = `${day}-${month}-${year}`;
console.log(format4); // 23-7-2022

Bây giờ, bạn đã thấy những cách khả thi mà bạn có thể muốn định dạng ngày của mình.

Đọc thêm  Ví dụ về JavaScript toString – Cách chuyển đổi một số thành một chuỗi trong JS và hơn thế nữa

Một tình huống khác có thể xảy ra nếu bạn muốn giá trị tháng và ngày bắt đầu bằng 0 nếu đó là một giá trị số duy nhất (từ 1-9). Để làm điều này, bạn cần thêm một điều kiện để xử lý việc này trước khi định dạng ngày của mình:

if (day < 10) {
    day = '0' + day;
}

if (month < 10) {
    month = `0${month}`;
}

let format1 = `${month}/${day}/${year}`;
console.log(format1); // 07/23/2022

Quan tâm đến những cách khác mà bạn có thể định dạng ngày trong JavaScript? Kiểm tra bài viết của tôi về “Cách định dạng ngày trong JavaScript bằng một dòng mã“.

Cách định dạng ngày trong JavaScript với Moment.js

Moment.js là thư viện ngày và giờ JavaScript mà bạn có thể sử dụng để nhanh chóng định dạng ngày của mình mà không cần xử lý logic với quá nhiều dòng mã.

Để sử dụng thư viện này, bạn phải cài đặt gói trong dự án của mình bằng cách sử dụng bất kỳ tùy chọn ưa thích nào trong tài liệu.

Đối với hướng dẫn này, bạn chỉ quan tâm đến cách bạn có thể định dạng ngày bằng Moment.js:

let date = moment().format();

console.log(date); // 2022-08-23T16:50:22-07:00

Để định dạng giá trị ngày/giờ này, tất cả những gì bạn phải làm là nhập định dạng ưa thích của mình và nó sẽ trả về ngày được định dạng như bên dưới:

let dateFormat1 = moment().format('D-MM-YYYY');
console.log(dateFormat1); // 23-08-2022

let dateFormat2 = moment().format('D/MM/YYYY');
console.log(dateFormat2); // 23/08/2022

let dateFormat3 = moment().format('MM-D-YYYY');
console.log(dateFormat3); // 08-23-2022

let dateFormat4 = moment().format('MM/D/YYYY');
console.log(dateFormat4); // 08/23/2022

Phần kết luận

Bài viết này đã hướng dẫn bạn cách định dạng ngày tháng trong JavaScript, từ đầu hoặc bằng thư viện moment.js.

Đọc thêm  Giải thích về gỡ lỗi – Cách làm cho JavaScript của bạn đợi người dùng của bạn nhập xong

Hãy lưu ý khi sử dụng thư viện cho các dự án nhỏ, bởi vì các thư viện làm tăng quy mô dự án của bạn. Điều này là do các thư viện này được thiết kế để xử lý nhiều thao tác hơn. Nhưng để sử dụng bất kỳ thao tác tối thiểu nào, bạn vẫn phải cài đặt toàn bộ thư viện.

Chúng tôi luôn khuyên bạn nên thực hiện các thao tác đơn giản như thế này từ đầu. Đó là, trừ khi bạn buộc phải sử dụng thư viện hoặc thư viện đã được cài đặt hoặc bạn đang thực hiện một dự án quy mô lớn yêu cầu một số định dạng phức tạp.

Hãy mã hóa vui vẻ!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status