
Handling dates and times in software seems simple until your application crosses borders. A seemingly straightforward format in one country can be completely alien in another. Dates can be written MM/DD/YYYY, DD/MM/YYYY, or even YYYY/MM/DD. Times might use a 12-hour clock with AM/PM, or a 24-hour format.
Getting this wrong can lead to confusion, misinterpretation of data, and a poor user experience. If your application serves users in diverse regions like Korea, the United States, Vietnam, and Japan, understanding and implementing locale-specific date and time formatting is crucial.
Let’s dive into the standard conventions for these four countries and explore how to implement them using common JavaScript tools.
๐ Understanding the Differences: A Quick Look
While many countries use variations of DD/MM/YYYY or MM/DD/YYYY, our focus regions cover some distinct styles, particularly around the year (YYYY) placement and separators.
Here are common formats you’ll encounter (focusing on YYYY.MM.DD HH:mm type structures):
๐ Common Date-Time Formats by Country (Example: June 10, 2025, 2:30 PM)
- ๐ฐ๐ท Korea
Format:YYYY.MM.DD HH:mm
Example:2025.06.10 14:30
→ Uses periods (dots) for the date, 24-hour clock. - ๐บ๐ธ USA
Format (12-hour):MM/DD/YYYY hh:mm A
Example:06/10/2025 2:30 PM
Format (24-hour):MM/DD/YYYY HH:mm
Example:06/10/2025 14:30
→ Uses slashes, both 12h and 24h formats are common. - ๐ป๐ณ Vietnam
Format:DD/MM/YYYY HH:mm
Example:10/06/2025 14:30
→ Uses slashes and 24-hour clock. - ๐ฏ๐ต Japan
Format:YYYY/MM/DD HH:mm
Example:2025/06/10 14:30
→ Uses slashes and 24-hour clock with year first.
(Note: These are common compact numerical formats. Fully localized formats like “June 10, 2025” or “2025๋ 6์ 10์ผ” are also used and handled differently).
Now, let’s look at the code! We’ll cover two primary methods in JavaScript: the built-in Intl.DateTimeFormat API and the popular dayjs library.
๐ง๐ป Method 1: Native Localization with Intl.DateTimeFormat
The Intl object in JavaScript provides language-sensitive string comparison, number formatting, and — crucially for us — date and time formatting. Intl.DateTimeFormat is the standard built-in way to handle locale-aware date and time representation.
Its strength lies in automatically using the conventions of the specified locale, including separator characters, order, and whether to use 12 or 24 hours (though you can hint preferences).
Here’s how you use it for our target countries:
const date = new Date('2025-06-10T14:30:00Z'); // Using ISO string for clarity, Date object uses epoch internally
// Base options for numeric date/time
const options: Intl.DateTimeFormatOptions = {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false, // Start with 24-hour preference, can be overridden by locale
};
// Korea (ko-KR)
// Output often includes periods and spaces standard in the locale.
const formatterKO = new Intl.DateTimeFormat('ko-KR', { ...options, hour12: false });
console.log('Korea:', formatterKO.format(date));
// Expected output (varies slightly by browser/runtime): "2025. 06. 10. 14:30"
// Matches the YYYY.MM.DD HH:mm pattern somewhat closely
// USA (en-US)
// Uses MM/DD/YYYY. We'll show 12-hour format as it's very common.
const formatterUS12 = new Intl.DateTimeFormat('en-US', { ...options, hour: 'numeric', minute: 'numeric', hour12: true });
console.log('USA (12h):', formatterUS12.format(date));
// Expected output: "06/10/2025, 2:30 PM"
const formatterUS24 = new Intl.DateTimeFormat('en-US', { ...options, hour12: false });
console.log('USA (24h):', formatterUS24.format(date));
// Expected output: "06/10/2025, 14:30"
// Vietnam (vi-VN)
// Uses DD/MM/YYYY.
const formatterVN = new Intl.DateTimeFormat('vi-VN', { ...options, day: '2-digit', month: '2-digit' });
console.log('Vietnam:', formatterVN.format(date));
// Expected output: "10/06/2025, 14:30"
// Matches the DD/MM/YYYY HH:mm pattern
// Japan (ja-JP)
// Uses YYYY/MM/DD. Output typically uses slashes and spaces as shown.
const formatterJP = new Intl.DateTimeFormat('ja-JP', { ...options });
console.log('Japan:', formatterJP.format(date));
// Expected output: "2025/06/10 14:30"
// Matches the YYYY/MM/DD HH:mm pattern
Key Takeaway: Intl.DateTimeFormat is excellent for producing output that feels native to a region based on its locale identifier (‘ko-KR’, ‘en-US’, etc.). You provide the desired components (year, month, day, etc.), and Intl handles the correct order, separators, and sometimes padding according to the locale’s standards. Note that the exact output string can vary slightly between JavaScript engines.
๐ง๐ป Method 2: Flexible Formatting with dayjs
Sometimes you don’t just want the standard locale format; you need a specific output string format, like exactly YYYY.MM.DD HH:mm. This is where lightweight date manipulation libraries shine. dayjs is a popular choice due to its small size and Moment.js-like syntax.
With dayjs, you define the desired output pattern explicitly using format tokens (like YYYY, MM, DD, HH, mm).
First, install dayjs:
npm install dayjs
# or
yarn add dayjs
Then, you can format like this:
import dayjs from 'dayjs';
// Note: Day.js core doesn't have timezone support. Use the 'utc' or 'timezone' plugin if needed.
// const utc = require('dayjs/plugin/utc');
// dayjs.extend(utc);
const date = dayjs('2025-06-10T14:30:00'); // dayjs can parse strings directly
// Korea: YYYY.MM.DD HH:mm
console.log('Korea (dayjs):', date.format('YYYY.MM.DD HH:mm'));
// Output: "2025.06.10 14:30"
// US (12-hour): MM/DD/YYYY hh:mm A
console.log('USA (dayjs 12h):', date.format('MM/DD/YYYY hh:mm A'));
// Output: "06/10/2025 02:30 PM" (Note: 'hh' for padded 12h, 'h' for non-padded)
// US (24-hour): MM/DD/YYYY HH:mm
console.log('USA (dayjs 24h):', date.format('MM/DD/YYYY HH:mm'));
// Output: "06/10/2025 14:30"
// Vietnam: DD/MM/YYYY HH:mm
console.log('Vietnam (dayjs):', date.format('DD/MM/YYYY HH:mm'));
// Output: "10/06/2025 14:30"
// Japan: YYYY/MM/DD HH:mm
console.log('Japan (dayjs):', date.format('YYYY/MM/DD HH:mm'));
// Output: "2025/06/10 14:30"
Key Takeaway: dayjs.format() gives you granular control over the output string based on the tokens you provide. This is ideal when you need to match a very specific, non-standard, or machine-readable format string across all users, regardless of their native locale settings.
Intl.DateTimeFormat vs. dayjs: Which Should You Use?
- Use Intl.DateTimeFormat when you want output that feels natural and standard for the user’s locale (or a locale you specify). It’s the built-in, performant, and standards-based approach for true localization. The exact output format (separators, spacing) is determined by the locale, not a strict pattern string.
- Use dayjs.format() (or similar library methods) when you need to generate an output string that strictly follows a precise, custom format pattern (like YYYY.MM.DD HH:mm exactly). This is useful for consistent logging, data interchange formats, or displaying dates in a UI element where a specific look is required across all locales. You are responsible for defining the format pattern correct for each target region.
Beyond Simple Formatting
While we focused on basic numerical formatting, international dates and times involve more:
- Time Zones: Dates/times must often be displayed in the user’s local time zone, which adds another layer of complexity (both Intl and libraries like dayjs with plugins can help here).
- Localized Strings: Displaying full month names (June vs. 6), day names (Tuesday vs. Tue), or using localized time words (like “AM” vs. “sรกng” in Vietnamese, or kanji characters in Japanese dates) requires different formatting options or accessing more comprehensive localization data. Intl.DateTimeFormat is excellent for this.
- Parsing: Converting user input strings back into Date objects also needs to be locale-aware.
Conclusion
Providing a great user experience globally means respecting local conventions, and date and time formats are a significant part of that. By understanding the differences between regions like Korea, the US, Vietnam, and Japan, and by leveraging powerful JavaScript tools like Intl.DateTimeFormat for native localization or dayjs for specific pattern control, you can ensure your application communicates time clearly and correctly, no matter where your users are.