Định dạng ngày tháng (Date Formats) trong JavaScript

Trong lập trình web, ngày tháng là một phần quan trọng khi làm việc với dữ liệu thời gian, như hiển thị thời gian bài viết, tạo lịch hẹn, hoặc theo dõi đơn hàng. Tuy nhiên, định dạng ngày tháng có sự khác biệt giữa các quốc gia và hệ thống, chẳng hạn như định dạng MM/DD/YYYY (Mỹ) và DD/MM/YYYY (Việt Nam, Châu Âu).

JavaScript cung cấp nhiều cách để định dạng ngày tháng, từ các phương thức có sẵn như toLocaleDateString(), toISOString() đến việc sử dụng Intl.DateTimeFormat hoặc thư viện hỗ trợ như Moment.js, date-fns. Trong bài viết này, mình sẽ tìm hiểu chi tiết các phương pháp giúp hiển thị ngày tháng đúng chuẩn và phù hợp với từng nhu cầu cụ thể.

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

Định dạng ngày tháng (Date Format) là cách hiển thị thông tin về ngày, tháng, năm theo một quy ước cụ thể. Tùy thuộc vào khu vực và ngữ cảnh sử dụng, định dạng ngày tháng có thể khác nhau.

Ví dụ về các định dạng phổ biến:

• MM/DD/YYYY → (12/31/2025) – Định dạng của Mỹ.
• DD/MM/YYYY → (31/12/2025) – Định dạng phổ biến ở Việt Nam, Châu Âu.
• YYYY-MM-DD → (2025-12-31) – Định dạng chuẩn ISO 8601.

Tại sao cần định dạng ngày tháng?

Việc định dạng ngày tháng đóng vai trò quan trọng trong lập trình và trải nghiệm người dùng:
Hiển thị ngày tháng phù hợp với từng khu vực: Giúp người dùng dễ dàng hiểu và đọc thông tin. Ví dụ, một người Mỹ có thể nhầm lẫn giữa 12/05/2025 (tháng 5 hay tháng 12?).
Cải thiện trải nghiệm người dùng: Ngày tháng được hiển thị rõ ràng, trực quan, giúp người dùng dễ dàng nắm bắt thông tin.
Dễ dàng so sánh, tính toán thời gian: Hỗ trợ các thao tác tính toán ngày tháng như tính số ngày giữa hai mốc thời gian, cộng/trừ ngày,...

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

JavaScript cung cấp nhiều phương pháp để định dạng ngày tháng, bao gồm:

• Sử dụng các phương thức có sẵn của Date: toLocaleDateString(), toISOString(), toDateString(),...
• Dùng Intl.DateTimeFormat để tùy chỉnh định dạng ngày tháng theo ngôn ngữ.
• Sử dụng thư viện bên ngoài như Moment.js, date-fns để xử lý ngày tháng nâng cao.

Trong các phần tiếp theo, chúng ta sẽ tìm hiểu chi tiết từng phương pháp để định dạng ngày tháng hiệu quả trong JavaScript.

Định dạng ngày tháng bằng phương thức có sẵn trong JavaScript

JavaScript cung cấp nhiều phương thức tích hợp sẵn để định dạng ngày tháng theo các tiêu chuẩn khác nhau. Dưới đây là các phương thức phổ biến cùng ví dụ minh họa.

toString() – Trả về chuỗi đầy đủ của đối tượng Date

Phương thức này trả về một chuỗi mô tả đầy đủ thời gian, bao gồm ngày tháng, giờ phút giây và múi giờ của hệ thống.

Ví dụ:

const now = new Date();
console.log(now.toString());

Kết quả (ví dụ trên máy có múi giờ GMT+7):

Tue Feb 26 2025 14:30:00 GMT+0700 (Indochina Time)

Lưu ý: Định dạng này phụ thuộc vào hệ điều hành và múi giờ của hệ thống.

toDateString() – Chỉ hiển thị phần ngày tháng

Phương thức này trả về một chuỗi hiển thị chỉ phần ngày tháng, không có giờ.

Ví dụ:

const now = new Date();
console.log(now.toDateString());

Kết quả:

Tue Feb 26 2025

Lưu ý: Định dạng này không thể tùy chỉnh theo ngôn ngữ.

toTimeString() – Chỉ hiển thị phần giờ

Phương thức này trả về chuỗi chứa thông tin về thời gian, không bao gồm ngày tháng.

Ví dụ:

const now = new Date();
console.log(now.toTimeString());

Kết quả:

14:30:00 GMT+0700 (Indochina Time)

Lưu ý: Chỉ hiển thị giờ, phút, giây và thông tin múi giờ.

toUTCString() – Hiển thị theo chuẩn thời gian quốc tế (UTC)

Phương thức này trả về chuỗi ngày giờ theo múi giờ UTC (GMT+0).

Ví dụ:

const now = new Date();
console.log(now.toUTCString());

Kết quả:

Tue, 26 Feb 2025 07:30:00 GMT

Lưu ý: Không phụ thuộc vào múi giờ hệ thống, luôn trả về theo chuẩn UTC.

Phương thức này trả về chuỗi ngày giờ theo chuẩn ISO 8601 với định dạng:

YYYY-MM-DDTHH:mm:ss.sssZ (Z là ký hiệu múi giờ UTC).

Ví dụ:

const now = new Date();
console.log(now.toISOString());

Kết quả:

2025-02-26T07:30:00.000Z

Lưu ý:

• ISO 8601 là tiêu chuẩn quốc tế được sử dụng rộng rãi trong API và cơ sở dữ liệu.
• Múi giờ luôn là UTC (Z).

toLocaleString() – Định dạng theo ngôn ngữ địa phương

Phương thức này trả về ngày giờ theo định dạng của từng ngôn ngữ và quốc gia.

Ví dụ (mặc định theo ngôn ngữ trình duyệt/hệ thống):

const now = new Date();
console.log(now.toLocaleString());

Kết quả (trên hệ thống tiếng Việt):

26/2/2025, 14:30:00

console.log(now.toLocaleString('en-US'));

2/26/2025, 2:30:00 PM

console.log(now.toLocaleDateString()); // Theo mặc định hệ thống
console.log(now.toLocaleDateString('vi-VN')); // Định dạng tiếng Việt
console.log(now.toLocaleDateString('en-US')); // Định dạng tiếng Anh - Mỹ
console.log(now.toLocaleDateString('ja-JP')); // Định dạng tiếng Nhật

26/2/2025
26/2/2025
2/26/2025
2025/2/26

console.log(now.toLocaleTimeString()); // Mặc định hệ thống
console.log(now.toLocaleTimeString('vi-VN')); // Tiếng Việt
console.log(now.toLocaleTimeString('en-US')); // Tiếng Anh - Mỹ

14:30:00
14:30:00
2:30:00 PM

new Intl.DateTimeFormat([locales], [options]).format(date)

const date = new Date(2025, 1, 26); // 26 tháng 2, 2025

console.log(new Intl.DateTimeFormat('vi-VN').format(date)); // "26/2/2025"
console.log(new Intl.DateTimeFormat('en-US').format(date)); // "2/26/2025"
console.log(new Intl.DateTimeFormat('fr-FR').format(date)); // "26/02/2025"

const date = new Date(2025, 1, 26, 14, 30, 45); // 26/2/2025, 14:30:45

const options = { year: 'numeric', month: 'long', day: '2-digit', weekday: 'long' };

console.log(new Intl.DateTimeFormat('vi-VN', options).format(date)); // "Thứ Tư, 26 tháng 2, 2025"
console.log(new Intl.DateTimeFormat('en-US', options).format(date)); // "Wednesday, February 26, 2025"
console.log(new Intl.DateTimeFormat('fr-FR', options).format(date)); // "mercredi 26 février 2025"

const date = new Date(2025, 1, 26, 14, 30, 45); // 26/2/2025, 14:30:45

const options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };

console.log(new Intl.DateTimeFormat('vi-VN', options).format(date)); // "14:30:45"
console.log(new Intl.DateTimeFormat('en-US', options).format(date)); // "14:30:45"
console.log(new Intl.DateTimeFormat('en-US', { ...options, hour12: true }).format(date)); // "2:30:45 PM"

const date = new Date();

const options = { 
    year: 'numeric', month: 'long', day: '2-digit', 
    hour: '2-digit', minute: '2-digit', second: '2-digit', 
    timeZoneName: 'short'
};

console.log(new Intl.DateTimeFormat('vi-VN', options).format(date)); 
// "26 tháng 2, 2025, 14:30:45 GMT+7"

console.log(new Intl.DateTimeFormat('en-US', options).format(date)); 
// "February 26, 2025, 2:30:45 PM GMT+7"

console.log(new Intl.DateTimeFormat('ja-JP', options).format(date)); 
// "2025年2月26日 14:30:45 GMT+7"

const options = { timeZone: 'America/New_York', hour: '2-digit', minute: '2-digit' };
console.log(new Intl.DateTimeFormat('en-US', options).format(new Date()));
// Hiển thị giờ theo múi giờ New York

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

npm install moment

const moment = require('moment'); // Dùng trong Node.js
import moment from 'moment'; // Dùng trong ES6+

const now = moment(); 

console.log(now.format('YYYY-MM-DD')); // 2025-02-26
console.log(now.format('DD/MM/YYYY')); // 26/02/2025
console.log(now.format('MMMM Do YYYY')); // February 26th 2025
console.log(now.format('dddd, MMMM Do YYYY, h:mm:ss A')); // Wednesday, February 26th 2025, 2:30:45 PM

npm install moment-timezone

const moment = require('moment-timezone');

const now = moment().tz('America/New_York'); 
console.log(now.format('YYYY-MM-DD HH:mm:ss Z')); // 2025-02-26 09:30:45 -05:00

const now = moment();

console.log("ISO 8601:", now.toISOString()); // 2025-02-26T14:30:45.000Z
console.log("UTC Format:", now.utc().format('YYYY-MM-DD HH:mm:ss')); // 2025-02-26 14:30:45
console.log("Relative Time:", now.startOf('day').fromNow()); // 14 hours ago
console.log("Custom Format:", now.format('[Hôm nay là] dddd, [ngày] DD [tháng] MM [năm] YYYY')); 
// Hôm nay là Thứ Tư, ngày 26 tháng 02 năm 2025

npm install date-fns

import { format } from 'date-fns';

import { format } from 'date-fns';

const now = new Date();

console.log(format(now, 'yyyy-MM-dd')); // 2025-02-26
console.log(format(now, 'dd/MM/yyyy')); // 26/02/2025
console.log(format(now, 'EEEE, MMMM do yyyy')); // Wednesday, February 26th 2025
console.log(format(now, 'HH:mm:ss')); // 14:30:45

const now = new Date();
console.log(now.toUTCString()); 
// Kết quả: "Tue, 26 Feb 2025 14:30:45 GMT"

const now = new Date();
console.log(now.toLocaleString('vi-VN')); 
// Kết quả (ở Việt Nam): "26/02/2025, 21:30:45"
console.log(now.toLocaleString('en-US')); 
// Kết quả (ở Mỹ): "2/26/2025, 9:30:45 AM"

const now = new Date();

const vietnamTime = new Intl.DateTimeFormat('vi-VN', { 
    timeZone: 'Asia/Ho_Chi_Minh', 
    dateStyle: 'full', 
    timeStyle: 'long' 
}).format(now);

const newYorkTime = new Intl.DateTimeFormat('en-US', { 
    timeZone: 'America/New_York', 
    dateStyle: 'full', 
    timeStyle: 'long' 
}).format(now);

console.log("Giờ Việt Nam:", vietnamTime); 
// Kết quả: "Thứ Tư, ngày 26 tháng 2 năm 2025 lúc 21:30:45 GMT+7"

console.log("Giờ New York:", newYorkTime); 
// Kết quả: "Wednesday, February 26, 2025 at 9:30:45 AM GMT-5"

INSERT INTO orders (order_date) VALUES (UTC_TIMESTAMP());

const now = new Date();
const utcDate = now.toISOString(); 

console.log(utcDate); 
// Kết quả: "2025-02-26T14:30:45.000Z" (UTC format)

const utcDate = new Date("2025-02-26T14:30:45.000Z");

const localTime = new Intl.DateTimeFormat('vi-VN', { 
    timeZone: 'Asia/Ho_Chi_Minh', 
    dateStyle: 'medium', 
    timeStyle: 'medium' 
}).format(utcDate);

console.log(localTime); 
// Kết quả: "26 thg 2, 2025, 21:30:45"

const moment = require('moment-timezone');

const utcDate = moment.utc("2025-02-26T14:30:45.000Z");
const vietnamTime = utcDate.tz("Asia/Ho_Chi_Minh").format('YYYY-MM-DD HH:mm:ss');

console.log(vietnamTime); 
// Kết quả: "2025-02-26 21:30:45"

import { format, utcToZonedTime } from 'date-fns-tz';

const utcDate = new Date("2025-02-26T14:30:45.000Z");
const vietnamTime = utcToZonedTime(utcDate, 'Asia/Ho_Chi_Minh');

console.log(format(vietnamTime, 'yyyy-MM-dd HH:mm:ss', { timeZone: 'Asia/Ho_Chi_Minh' }));
// Kết quả: "2025-02-26 21:30:45"