Hướng Dẫn Định Dạng Ngày trong JavaScript: Cách Định Dạng Ngày Đúng Cách với Các Ví Dụ

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Giới thiệu: Tại sao Định dạng Ngày lại Quan trọng trong JavaScript

Trong phát triển web sử dụng JavaScript, việc hiển thị và quản lý ngày giờ là điều thiết yếu. Ví dụ, ứng dụng lịch và hệ thống quản lý log yêu cầu dữ liệu ngày giờ được định dạng chính xác. Tuy nhiên, việc xử lý ngày trong JavaScript có thể cảm thấy hơi phức tạp đối với người mới bắt đầu.

Trong hướng dẫn này, chúng tôi giới thiệu các kỹ thuật thực tế và ví dụ mã để giúp bạn thành thạo định dạng ngày trong JavaScript. Từ việc sử dụng cơ bản của đối tượng Date đến việc sử dụng nâng cao Intl.DateTimeFormat, và thậm chí so sánh các thư viện bên ngoài, bài viết này cung cấp giải thích toàn diện.

Các Kịch bản Thông thường Cần Định dạng Ngày

1. Hiển thị dữ liệu trong các ứng dụng web:

• Hỗ trợ người dùng trên các lịch và múi giờ khác nhau.

1. Quản lý log và gỡ lỗi:

• Ghi lại dấu thời gian cho log lỗi và hành động của người dùng.

1. Hỗ trợ đa ngôn ngữ:

• Điều chỉnh định dạng hiển thị ngày cho người dùng quốc tế.

Lợi ích cho Độc giả

Bằng cách đọc hướng dẫn này, bạn sẽ có được các kỹ năng sau:

• Hiểu cách làm việc với đối tượng Date cơ bản.
• Hiển thị ngày linh hoạt bằng cách định dạng thủ công và các phương thức tích hợp.
• Lập trình hiệu quả với sự trợ giúp của các thư viện ngày bên ngoài.

Trong phần tiếp theo, chúng ta sẽ xem xét kỹ hơn các nguyên tắc cơ bản của đối tượng Date trong JavaScript. Hiểu được điều này sẽ cho phép bạn chuyển sang các chủ đề nâng cao một cách suôn sẻ hơn.

2. Cơ bản về Xử lý Ngày trong JavaScript: Đối tượng Date là gì?

Trong JavaScript, đối tượng Date được sử dụng để quản lý ngày và giờ. Hiểu đối tượng này là bước đầu tiên để xử lý định dạng ngày một cách chính xác. Phần này giải thích cách sử dụng cơ bản của đối tượng Date.

2.1 Cách Tạo Đối tượng Date

Một đối tượng Date có thể được tạo theo các cách sau.

1. Lấy ngày và giờ hiện tại

   const today = new Date();
   console.log(today); // Outputs the current date and time
   

2. Đặt một ngày và giờ cụ thể

   const customDate = new Date(2024, 11, 28); // Year, month (starts from 0), day
   console.log(customDate); // December 28, 2024
   

3. Tạo ngày từ một chuỗi

   const dateFromString = new Date('2024-12-28');
   console.log(dateFromString); // Date converted from ISO format
   

4. Tạo ngày từ một dấu thời gian (timestamp)

   const timestampDate = new Date(1703740800000); // Milliseconds
   console.log(timestampDate); // Date represented by the timestamp
   

2.2 Các Phương thức Lấy Thành phần Ngày và Giờ

Đối tượng Date cung cấp các phương thức để lấy các thành phần ngày và giờ riêng lẻ.

2.3 Làm việc với Múi giờ và UTC

Lấy thời gian địa phương:

const date = new Date();
console.log(date.toString()); // Local time

Lấy thời gian UTC:

console.log(date.toUTCString()); // UTC-based time

Lấy độ lệch múi giờ:

console.log(date.getTimezoneOffset()); // -540 (in minutes, for Japan Standard Time)

Tóm tắt

Trong phần này, chúng tôi đã giải thích các kiến thức cơ bản về đối tượng Date trong JavaScript, bao gồm cách tạo ngày và lấy hoặc thao tác các thành phần ngày.

Trong phần tiếp theo, chúng ta sẽ đi sâu hơn vào các phương thức cụ thể để định dạng ngày trong JavaScript.

3. Ba Cách Định dạng Ngày trong JavaScript

JavaScript cung cấp một số cách để định dạng ngày thành các biểu diễn khác nhau. Trong phần này, chúng tôi giải thích chi tiết ba phương pháp: định dạng thủ công, các phương thức tích hợp, và các tùy chọn định dạng nâng cao.

3.1 Định dạng Thủ công: Từ Cơ bản đến Ứng dụng Thực tế

Ví dụ Định dạng Tùy chỉnh Đơn giản

const date = new Date();
const year = date.getFullYear(); // Year
const month = ('0' + (date.getMonth() + 1)).slice(-2); // Month (zero-padded)
const day = ('0' + date.getDate()).slice(-2); // Day (zero-padded)

javascript const formattedDate = ${year}-${month}-${day}; console.log(formattedDate); // Ví dụ: 2024-12-28

3.2 Locale-Aware Formatting with toLocaleDateString()

Basic Usage

javascript const date = new Date(); console.log(date.toLocaleDateString(‘ja-JP’)); // Ví dụ: 2024/12/28

Customization with Options

javascript const options = { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ }; console.log(date.toLocaleDateString(‘ja-JP’, options)); // Ví dụ: 2024/12/28

3.3 Advanced Customization: Using Intl.DateTimeFormat

Basic Usage

javascript const date = new Date(); const formatter = new Intl.DateTimeFormat(‘ja-JP’, { dateStyle: ‘full’ }); console.log(formatter.format(date)); // Ví dụ: Thứ Bảy, 28 Tháng 12, 2024

Summary

In this section, we introduced three different ways to format dates in JavaScript. In the next section, we will explain how to improve efficiency by using external libraries for date handling.

4. Using External Libraries: Comparing Moment.js, date-fns, and Day.js

While JavaScript’s built-in date methods are powerful, using external libraries can make complex formatting and processing more concise and efficient.

4.1 Moment.js: A Proven Library for Legacy Systems

Basic Usage

javascript const moment = require(‘moment’); // Nhập khẩu trong môi trường Node.js const now = moment(); // Ngày và giờ hiện tại console.log(now.format(‘YYYY-MM-DD HH:mm:ss’)); // Ví dụ: 2024-12-28 14:30:45

4.2 date-fns: A Modular Library for Modern Projects

Basic Usage

javascript import { format, addDays } from ‘date-fns’;

const now = new Date(); console.log(format(now, ‘yyyy-MM-dd’)); // Ví dụ: 2024-12-28

const nextWeek = addDays(now, 7); console.log(format(nextWeek, ‘yyyy-MM-dd’)); // Ví dụ: 2025-01-04

4.3 Day.js: A Lightweight, Moment-Compatible Modern Library

Basic Usage

javascript const dayjs = require(‘dayjs’);

const now = dayjs(); console.log(now.format(‘YYYY-MM-DD’)); // Ví dụ: 2024-12-28

const nextWeek = now.add(7, ‘day’); console.log(nextWeek.format(‘YYYY-MM-DD’)); // Ví dụ: 2025-01-04

4.4 Library Comparison Table

Summary

In this section, we compared popular external libraries that simplify date handling in JavaScript. In the next section, we will introduce practical application examples using these formatting techniques.

5. Practical Examples: Applications Using Date Formatting

5.1 Displaying Dates in a Calendar Application

Implementation Example

javascript const selectedDate = new Date(); // Ngày được người dùng chọn

const formattedDate = selectedDate.toLocaleDateString(‘ja-JP’, { year: ‘numeric’, month: ‘long’, day: ‘numeric’, weekday: ‘long’ });

console.log(Ngày đã chọn: ${formattedDate}); // Ví dụ: Ngày đã chọn: Thứ Bảy, 28 Tháng 12, 2024

5.2 Managing Timestamps in Log Files

Implementation Example

javascript const logTime = new Date().toISOString(); // Lấy ngày và giờ ở định dạng ISO console.log([LOG] ${logTime}: Quá trình bắt đầu); // Ví dụ: [LOG] 2024-12-28T05:30:00.000Z: Quá trình bắt đầu

5.3 Validating and Formatting Form Input Dates

Implementation Example

javascript function formatInputDate(inputDate) { const date = new Date(inputDate); // Chuyển chuỗi đầu vào thành đối tượng Date

if (isNaN(date)) { console.log(‘Định dạng ngày không hợp lệ.’); return null; }

return date.toLocaleDateString(‘ja-JP’, { year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’ }); }

console.log(formatInputDate(‘2024-12-28’)); // Ví dụ: 2024/12/28

Summary

In this section, we introduced practical examples of using date formatting in JavaScript, including calendar displays, log management, and form validation. In the next section, we address frequently asked questions (FAQ) and provide solutions to common issues.

6. Frequently Asked Questions (FAQ)

Q1: Làm thế nào để hiển thị ngày và thời gian ở định dạng ISO?

Trả lời

Định dạng ISO là tiêu chuẩn quốc tế cho việc biểu diễn ngày và thời gian và được sử dụng rộng rãi trong cơ sở dữ liệu và giao tiếp API. Trong JavaScript, bạn có thể sử dụng phương thức toISOString() của đối tượng Date.

Mã mẫu

const date = new Date();
console.log(date.toISOString()); // Example: 2024-12-28T05:30:00.000Z

Q2: Tôi nên xử lý sự khác biệt giữa thời gian UTC và thời gian địa phương như thế nào?

Trả lời

Mặc định, JavaScript sử dụng thời gian địa phương, nhưng nó cũng cung cấp các phương thức để chuyển đổi sang và từ UTC.

Mã mẫu

Chuyển thời gian địa phương sang UTC:

const date = new Date();
console.log(date.toUTCString()); // Example: Sat, 28 Dec 2024 05:30:00 GMT

Chuyển UTC sang thời gian địa phương:

const date = new Date('2024-12-28T05:30:00Z'); 
console.log(date.toString()); 
// Example: Sat Dec 28 2024 14:30:00 GMT+0900 (Japan Standard Time)

Q3: Cách dễ nhất để xử lý việc thêm số 0 phía trước trong định dạng ngày là gì?

Trả lời

function zeroPad(number) {
  return number.toString().padStart(2, '0');
}

const date = new Date();
const formattedDate = `${date.getFullYear()}-${zeroPad(date.getMonth() + 1)}-${zeroPad(date.getDate())}`;
console.log(formattedDate); // Example: 2024-12-28

Tóm tắt

Trong phần này, chúng tôi đã đề cập đến các câu hỏi thường gặp về định dạng ngày trong JavaScript và cung cấp các giải pháp thực tiễn. Trong phần tiếp theo, chúng tôi sẽ kết thúc bài viết bằng một bản tóm tắt và kế hoạch hành động để áp dụng những gì bạn đã học.

7. Kết luận và Các bước thực tiễn tiếp theo

7.1 Những điểm chính cần nhớ từ bài viết này

1. Cơ bản về đối tượng Date trong JavaScript: Chúng tôi đã trình bày cách tạo đối tượng Date và sử dụng các phương thức để lấy và thao tác các giá trị ngày và thời gian.
2. Ba cách tiếp cận định dạng ngày: Định dạng thủ công, các phương thức tích hợp sẵn, và việc sử dụng các thư viện bên ngoài.
3. Các trường hợp sử dụng thực tiễn: Các ví dụ thực tế như lịch, quản lý log, và xác thực biểu mẫu.
4. FAQ: Những thách thức phổ biến và các giải pháp đã được chứng minh cho việc định dạng ngày.

7.2 Kế hoạch hành động cho việc triển khai thực tiễn

1. Thử các ví dụ mã: Chạy mã mẫu trong một trình soạn thảo trực tuyến hoặc môi trường phát triển cục bộ của bạn để hiểu sâu hơn.
2. Áp dụng vào dự án thực tế: Tích hợp định dạng ngày vào các dự án thực tế bằng cách thêm tính năng lịch hoặc chức năng quản lý log.
3. So sánh các thư viện: Kiểm tra Moment.js, date-fns và Day.js để xác định thư viện nào phù hợp nhất với yêu cầu dự án của bạn.

7.3 Suy nghĩ cuối cùng

Định dạng ngày trong JavaScript dao động từ các thao tác đơn giản đến tùy chỉnh nâng cao và các thư viện bên ngoài mạnh mẽ. Hãy sử dụng hướng dẫn này như một tài liệu tham khảo để triển khai việc xử lý ngày một cách hiệu quả, linh hoạt và dễ bảo trì trong các ứng dụng của bạn.