Cách định dạng ngày trong JavaScript với một dòng mã – cách định dạng ngày tháng trong javascript

Trong một thời gian dài, tôi đã sử dụng các thư viện như Date-fns bất cứ khi nào tôi cần định dạng ngày tháng trong JavaScript. Nhưng nó thực sự kỳ lạ bất cứ khi nào tôi làm điều này trong các dự án nhỏ yêu cầu các định dạng ngày tháng đơn giản mà JavaScript cung cấp theo mặc định. Tôi phát hiện ra rằng hầu hết các nhà phát triển làm điều này rất nhiều. Và tôi

Bạn đang xem: cách định dạng ngày trong javascript

Trong một thời gian dài, tôi đã sử dụng các thư viện như Date-fns bất cứ khi nào tôi cần định dạng ngày tháng trong JavaScript. Nhưng nó thực sự kỳ lạ bất cứ khi nào tôi làm điều này trong các dự án nhỏ yêu cầu định dạng ngày tháng đơn giản mà JavaScript cung cấp theo mặc định.

Tôi phát hiện ra rằng hầu hết các nhà phát triển đều làm điều này rất nhiều. Và tôi nghĩ rằng đây là cách tốt nhất cho đến khi gần đây tôi phát hiện ra rằng chúng ta không phải lúc nào cũng cần sử dụng thư viện để định dạng ngày tháng trong JavaScript .

Trong trường hợp bạn tò mò muốn thử điều này, đây là mã: 👇

  new Date (). ToLocaleDateString ('en-us', {weekday: "long", năm: "số", tháng: "ngắn", ngày: "số"})
// "Thứ Sáu, ngày 2 tháng 7 năm 2021"  

Sau khi thử điều này trong mã của riêng bạn và thấy nó hoạt động, hãy hiểu tại sao nó hoạt động và tìm hiểu một số cách khác để định dạng ngày trong JavaScript với chỉ một dòng mã.

Lấy ngày trong JavaScript thường không phải là vấn đề, nhưng việc định dạng những ngày này cho phù hợp với dự án của bạn có thể gây khó khăn cho người mới bắt đầu. Bởi vì điều này, hầu hết mọi người cuối cùng sẽ sử dụng thư viện.

Phương pháp được sử dụng nhiều nhất để lấy ngày tháng trong JavaScript là đối tượng new Date () .

Theo mặc định, khi bạn chạy new Date () trong thiết bị đầu cuối của mình, nó sẽ sử dụng múi giờ của trình duyệt và hiển thị ngày tháng dưới dạng chuỗi văn bản đầy đủ, chẳng hạn như Thứ Sáu Tháng Bảy 02/2021 12:44:45 GMT + 0100 (Giờ mùa hè Anh).

Tuy nhiên, việc có nội dung như thế này trong trang web hoặc ứng dụng của bạn không chuyên nghiệp và không dễ đọc. Vì vậy, điều này buộc bạn phải tìm cách tốt hơn để định dạng những ngày này.

Hãy xem một số phương thức hoạt động trên đối tượng ngày tháng.

Có rất nhiều phương pháp mà bạn có thể áp dụng cho đối tượng ngày tháng. Bạn có thể sử dụng các phương pháp này để lấy thông tin từ một đối tượng ngày tháng. Dưới đây là một số trong số chúng:

  • getFullYear () - lấy năm dưới dạng số bốn chữ số (yyyy)
  • getMonth ( ) - lấy tháng dưới dạng số (0-11)
  • getDate () - lấy ngày dưới dạng số (1-31)
  • getHours () - lấy giờ (0-23)

Và nhiều hơn nữa…

Thật không may, hầu hết các phương pháp này vẫn cần rất nhiều mã để chuyển đổi ngày tháng sang định dạng mà chúng ta mong muốn.

Ví dụ: new Date (). getMonth () sẽ xuất ra 6, viết tắt của July. Để tôi sử dụng tháng 7 trong dự án của mình, tôi sẽ cần có mã dài như thế này thực sự có thể rườm rà:

  const currentMonth = new Date ();
const months = ["Tháng 1", "Tháng 2", "Tháng 3", "Tháng 4", "Tháng 5", "Tháng 6", "Tháng 7", "Tháng 8", "Tháng 9", "Tháng 10", "Tháng 11", "Tháng 12 "];
console.log (months [currentMonth.getMonth ()]);  

Hãy xem xét hai phương pháp mà bạn có thể sử dụng để định dạng ngày tháng của mình theo cách tốt nhất để bạn có thể sử dụng chúng cho các dự án của bạn.

Phương thức JavaScript toDateString () trả về phần ngày tháng của một đối tượng ngày tháng ở dạng một chuỗi sử dụng định dạng sau:

    < li> Ba chữ cái đầu tiên của tên ngày trong tuần
  1. Ba chữ cái đầu tiên của tên tháng
  2. Ngày có hai chữ số trong tháng, được chèn thêm số 0 ở bên trái nếu cần
  3. Năm có bốn chữ số (ít nhất), được đệm bằng số 0 ở bên trái nếu cần
  new Date (). toDateString ();
// "Thứ sáu, ngày 02 tháng 7 năm 2021"  

Một nhược điểm lớn của phương pháp này là chúng ta không thể thao tác đầu ra ngày theo cách chúng ta muốn.

Ví dụ: nó không cung cấp cho chúng tôi khả năng hiển thị ngày tháng theo ngôn ngữ của chúng tôi. Hãy xem xét một phương thức khác mà đối với tôi vẫn là một trong những phương pháp tốt nhất.

Phương thức này trả về đối tượng ngày tháng dưới dạng một chuỗi sử dụng các quy ước cục bộ. Nó cũng có các tùy chọn làm đối số cho phép bạn / ứng dụng của bạn tùy chỉnh hoạt động của hàm.

Cú pháp:

  toLocaleDateString ()
toLocaleDateString (ngôn ngữ)
toLocaleDateString (ngôn ngữ, tùy chọn)  

Hãy xem một số ví dụ và kết quả đầu ra của chúng:

 const currentDate = new Ngày ();

const options = {ngày trong tuần: 'long', năm: 'số', tháng: 'ngắn', ngày: 'số'};

console.log (currentDate.toLocaleDateString ('de-DE', các tùy chọn));
// Freitag, 2. Tháng 7 năm 2021

console.log (currentDate.toLocaleDateString ('ar-EG', các tùy chọn))
// الجمعة ، ٢ يوليو ٢٠٢١

console.log (currentDate.toLocaleDateString ('en-us', options));
// Thứ Sáu, ngày 2 tháng 7 năm 2021  

Bạn cũng có thể quyết định không sử dụng ngôn ngữ hoặc tùy chọn:

  new Date (). toLocaleDateString ()
// "7/2/2021"  

Và bạn cũng có thể quyết định chỉ sử dụng các ngôn ngữ. Thao tác này sẽ xuất ra thông tin giống như thông tin trước đó dựa trên múi giờ của trình duyệt của tôi.

  new Date (). ToLocaleDateString ('en-US')
"7/2/2021"  

Bạn cũng có thể quyết định thay đổi các tùy chọn theo ý muốn. Có 4 tùy chọn cơ bản là:

  • ngày trong tuần - Kết quả hiển thị ngày trong tuần tùy thuộc vào cách bạn muốn nó xuất hiện (ngắn hay dài).
  • year - Kết quả này xuất ra năm dưới dạng số
  • tháng - Kết quả này xuất ra tháng trong năm tùy thuộc vào cách bạn muốn. xuất hiện (ngắn hoặc dài).
  • day - Cuối cùng, điều này xuất ra ngày dưới dạng số
  new Date (). toLocaleDateString ('en-us', {weekday:" long ", year:" numeric ", month:" short "}) //" Thứ sáu tháng 7 năm 2021 "

new Date (). toLocaleDateString ('en-us', {year: "numeric", month: "short"})
// "Tháng 7 năm 2021"  

Kết luận

Đối tượng date có khoảng bảy phương pháp định dạng. Mỗi phương thức trong số này cung cấp cho bạn một giá trị cụ thể:

  1. toString () cung cấp cho bạn Thứ Sáu, ngày 02 tháng 7 năm 2021 14:03:54 GMT + 0100 (Mùa hè ở Anh Thời gian)
  2. toDateString () cung cấp cho bạn Thứ Sáu, ngày 02 tháng 7 năm 2021
  3. toLocaleString () < / code> cung cấp cho bạn 7/2/2021, 2:05:07 CH
  4. toLocaleDateString () cung cấp cho bạn 7/2 / 2021
  5. toGMTString () cung cấp cho bạn Thứ Sáu, ngày 2 tháng 7 năm 2021 13:06:02 GMT
  6. < code> toUTCString () cung cấp cho bạn Thứ Sáu, ngày 02 tháng 7 năm 2021 13:06:28 GMT
  7. toISOString () mang lại cho bạn 2021-07-02T13: 06: 53.422Z

Nếu bạn đang tìm kiếm các định dạng ngày nâng cao hơn, thì bạn sẽ cần tự tạo một định dạng tùy chỉnh. Hãy xem các tài nguyên bên dưới để giúp bạn hiểu cách tạo các định dạng ngày tùy chỉnh.

Tài nguyên hữu ích


Xem thêm những thông tin liên quan đến chủ đề cách định dạng ngày tháng trong javascript

Javascript: Lấy ngày tháng năm giờ phút giây / Get date, month, year, hour, minute

  • Tác giả: IT1PHUT
  • Ngày đăng: 2021-08-07
  • Đánh giá: 4 ⭐ ( 6563 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn lấy ngày giờ bằng trong javascript thông qua đối tượng Date.
    Code to get the date and time equal in javascript through the Date object.
    ----------

    var d = new Date();// thoi gian hien tai

    var ngay = d.getDate();
    var thang = d.getMonth() + 1;
    var nam = d.getFullYear();

    var gio = d.getHours();
    var phut = d.getMinutes();
    var giay = d.getSeconds();

    var sngay = ngay + '/' + thang + '/' + nam + " " + gio + ":" + phut + ":" + giay;

[Javascript Căn bản] Định dạng thời gian trong JavaScript

  • Tác giả: tuandc.com
  • Đánh giá: 4 ⭐ ( 8956 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Định dạng ngày tháng trong JavaScript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 4 ⭐ ( 4300 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Định dạng ngày tháng trong JavaScript - Lập Trình Từ Đầu 1 JavaScript Căn Bản

Những thư viện xử lý ngày tháng trong JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 8365 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: May mắn thay, cộng đồng JavaScript đã phát triển những thư viện xử lý ngày tháng, giúp chúng ta code trở nên dễ dàng và bớt nhàm chán hơn.

Hàm chuyển đổi dấu thời gian thành ngày tháng của con người trong javascript

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 5845 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Giá trị 1382086394000 có thể là giá trị thời gian, là số mili giây kể từ…

Định dạng ngày tháng trong JavaScript

  • Tác giả: webcoban.vn
  • Đánh giá: 5 ⭐ ( 5026 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách định dạng ngày tháng trong javascript, cach dinh dang ngay thang trong javascript

Định dạng ngày tháng bằng Intl.DateTimeFormat

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 2379 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong javascript, hiệp hội quốc tế ECMAScript công bố một object tên là Intl, trong đó có chứa tất cả các phương thức liên quan tới bản địa hóa (ngôn ngữ, ngày tháng, định dạng tiền tệ, vâng vâng). Cùng lướt qua API Intl.DateTimeFormat được cung cấp

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách nối 3 bảng (hoặc nhiều hơn) trong SQL - tham gia 3 bảng sql