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 đơ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: định dạng ngày ngắn 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 bằng 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 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 rằng 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à một 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ể phức tạp đối với 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 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 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, có một cái gì đó 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.

Xem Thêm  Ăn dứa bị rát lưỡi là vì sao và cách chữa rát lưỡi khi ăn dứa

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 phải 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 điền vào bên trái một số 0 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 pháp 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 / các ứng dụng của bạn tùy chỉnh hoạt động của hàm.

Xem Thêm  Làm thế nào để gọi hàm PHP khi nhấp vào một nút? - gọi hàm php từ html

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', 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 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 hiện 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 pháp 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 02 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 đị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ủ đề javascript định dạng ngày ngắn

Working with Javascript Dates for Beginners

  • Tác giả: iEatWebsites
  • Ngày đăng: 2018-11-11
  • Đánh giá: 4 ⭐ ( 2523 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video I will show you the basics on how to work with Date instance and how you can easily change the format using Javascript vanilla or a library called moment.js.

    Events API: http://platform.seatgeek.com/

    Basic code: https://codepen.io/ieatwebsites/pen/RBXYxO

    Fetching my data: https://codepen.io/ieatwebsites/pen/ZMzoLp

    Date methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateJavaScript_Date_instances

Hàm xử lý ngày tháng (Date) trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 4690 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm xử lý ngày tháng (Date) trong Javascript * Bài trước chúng ta đã tìm hiểu đối tượng Date trong Javascript rồi thì trong bài này mình sẽ nói đến một số hàm xử lý liên quan đến đối tượng Date này….

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

  • Tác giả: freehost.page
  • Đánh giá: 5 ⭐ ( 1878 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Định dạng ngày JavaScript

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 3 ⭐ ( 8397 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: botvietbai.com cung cấp các hướng dẫn, tài liệu tham khảo và bài tập trực tuyến miễn phí bằng tất cả các ngôn ngữ chính của web. Bao gồm các chủ đề phổ biến như HTML, CSS, JavaScript, Python, SQL, Java, và nhiều hơn nữa.

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

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 9870 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Nhận định dạng ngày ngắn ngôn ngữ bằng javascript

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 1229 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] function getLocaleDateString() { const formats = { “af-ZA”: “yyyy/MM/dd”, “am-ET”: “d/M/yyyy”, “ar-AE”: “dd/MM/yyyy”, “ar-BH”: “dd/MM/yyyy”, “ar-DZ”:…

Đối tượng Date trong Javascript – Định dạng format date

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 1996 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đối tượng Date trong Javascript, Date là một object giúp lập trình viên lấy được thời gian hiện tại ở máy khách client, nó có nhiều định dạng format khác nhau

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

By ads_php