📅 | Date & Time Formatting

🎯 Learning Objectives

Understand date and time format variations across cultures
Master date/time pattern strings and placeholders
Handle 12-hour vs 24-hour time formats
Format dates correctly for user's locale
Avoid ambiguous date representations

🌍 The Date Format Challenge

The date "03/04/05" could mean:

🇺🇸 March 4, 2005 (US: MM/DD/YY)
🇬🇧 April 3, 2005 (UK: DD/MM/YY)
🇯🇵 May 3, 2004 (Japan: YY/MM/DD)
And many more interpretations!

⚠️ Critical Insight

There is no universal date format that works everywhere. A date written as 12/01/2025 is ambiguous and will confuse international users. Always format dates according to the user's locale or use an unambiguous format like ISO 8601.

Common Date Format Patterns

Region/Locale	Short Format	Long Format	Pattern
US (en-US)	`11/5/2025`	November 5, 2025	M/D/YYYY
UK (en-GB)	`05/11/2025`	5 November 2025	D/M/YYYY
Japan (ja-JP)	`2025/11/05`	2025年11月5日	YYYY/M/D
Germany (de-DE)	`05.11.2025`	5. November 2025	D.M.YYYY
China (zh-CN)	`2025/11/5`	2025年11月5日	YYYY/M/D
Korea (ko-KR)	`2025. 11. 5.`	2025년 11월 5일	YYYY. M. D.
ISO 8601	`2025-11-05`	2025-11-05	YYYY-MM-DD

🕐 Time Format Variations

Time formatting varies primarily between 12-hour (with AM/PM) and 24-hour formats, but there are also differences in separators and period markers.

Time Format Examples (2:30 PM)

Region/Locale	Short Time	Long Time	Format Type
US (en-US)	`2:30 PM`	`2:30:00 PM`	12-hour
UK (en-GB)	`14:30`	`14:30:00`	24-hour
Germany (de-DE)	`14:30`	`14:30:00`	24-hour
Japan (ja-JP)	`14:30`	`14時30分00秒`	24-hour
India (hi-IN)	`2:30 pm`	`2:30:00 pm`	12-hour
France (fr-FR)	`14:30`	`14:30:00`	24-hour

12-Hour Format Regions

United States
Canada (English)
Australia
Philippines
India
Pakistan

24-Hour Format Regions

Most of Europe
Latin America
Asia (China, Japan, Korea)
Middle East
Africa

💻 Implementation Guidelines

JavaScript Examples

Date Formatting

const date = new Date('2025-11-05T14:30:00Z');

// US Format - Short
const usShort = new Intl.DateTimeFormat('en-US').format(date);
console.log(usShort);
// → "11/5/2025"

// US Format - Long
const usLong = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(date);
console.log(usLong);
// → "November 5, 2025"

// UK Format
const ukFormat = new Intl.DateTimeFormat('en-GB', {
  year: 'numeric',
  month: 'short',
  day: 'numeric'
}).format(date);
console.log(ukFormat);
// → "5 Nov 2025"

// German Format
const deFormat = new Intl.DateTimeFormat('de-DE', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(date);
console.log(deFormat);
// → "5. November 2025"

// Japanese Format
const jpFormat = new Intl.DateTimeFormat('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
}).format(date);
console.log(jpFormat);
// → "2025年11月5日"

// ISO 8601 (unambiguous, good for APIs)
console.log(date.toISOString());
// → "2025-11-05T14:30:00.000Z"

Time Formatting

const date = new Date('2025-11-05T14:30:00Z');

// US - 12-hour format with AM/PM
const usTime = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  timeZoneName: 'short',
  timeZone: 'America/New_York'
}).format(date);
console.log(usTime);
// → "9:30 AM EST"

// UK - 24-hour format
const ukTime = new Intl.DateTimeFormat('en-GB', {
  hour: '2-digit',
  minute: '2-digit',
  timeZone: 'Europe/London'
}).format(date);
console.log(ukTime);
// → "14:30"

// With seconds
const timeWithSeconds = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit',
  hour12: true
}).format(date);
console.log(timeWithSeconds);
// → "9:30:00 AM"

// Force 24-hour format
const force24h = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit',
  minute: '2-digit',
  hour12: false
}).format(date);
console.log(force24h);
// → "09:30"

Combined Date & Time Formatting

const date = new Date('2025-11-05T14:30:00Z');

// Full date and time - US
const usFull = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit',
  timeZoneName: 'short',
  timeZone: 'America/Los_Angeles'
}).format(date);
console.log(usFull);
// → "November 5, 2025 at 6:30 AM PST"

// Full date and time - German
const deFull = new Intl.DateTimeFormat('de-DE', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  timeZone: 'Europe/Berlin'
}).format(date);
console.log(deFull);
// → "5. November 2025, 15:30"

// Relative time formatting (modern browsers)
const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(rtf.format(-1, 'day'));    // → "yesterday"
console.log(rtf.format(2, 'week'));    // → "in 2 weeks"
console.log(rtf.format(-3, 'month'));  // → "3 months ago"

Python Examples

Using Babel for Date/Time Formatting

from datetime import datetime
from babel.dates import format_date, format_time, format_datetime
import pytz

dt = datetime(2025, 11, 5, 14, 30, 0, tzinfo=pytz.UTC)

# Date formatting
us_date = format_date(dt, format='long', locale='en_US')
print(us_date)  # → "November 5, 2025"

uk_date = format_date(dt, format='long', locale='en_GB')
print(uk_date)  # → "5 November 2025"

de_date = format_date(dt, format='long', locale='de_DE')
print(de_date)  # → "5. November 2025"

jp_date = format_date(dt, format='long', locale='ja_JP')
print(jp_date)  # → "2025年11月5日"

# Time formatting
us_time = format_time(dt, format='short', locale='en_US')
print(us_time)  # → "2:30 PM"

uk_time = format_time(dt, format='short', locale='en_GB')
print(uk_time)  # → "14:30"

# Combined date and time
us_full = format_datetime(dt, format='full', locale='en_US')
print(us_full)
# → "Wednesday, November 5, 2025 at 2:30:00 PM GMT"

# Custom format patterns
custom = format_datetime(dt, "EEE, MMM d, yyyy 'at' h:mm a", locale='en_US')
print(custom)  # → "Wed, Nov 5, 2025 at 2:30 PM"

Java Examples

Using java.time for Date/Time Formatting

import java.time.*;
import java.time.format.*;
import java.util.Locale;

ZonedDateTime dt = ZonedDateTime.of(
    2025, 11, 5, 14, 30, 0, 0,
    ZoneId.of("UTC")
);

// US Format
DateTimeFormatter usFormatter = DateTimeFormatter.ofLocalizedDate(
    FormatStyle.LONG
).withLocale(Locale.US);
System.out.println(dt.format(usFormatter));
// → "November 5, 2025"

// German Format
DateTimeFormatter deFormatter = DateTimeFormatter.ofLocalizedDate(
    FormatStyle.LONG
).withLocale(Locale.GERMANY);
System.out.println(dt.format(deFormatter));
// → "5. November 2025"

// Time with US 12-hour format
DateTimeFormatter usTimeFormatter = DateTimeFormatter.ofLocalizedTime(
    FormatStyle.SHORT
).withLocale(Locale.US);
System.out.println(dt.format(usTimeFormatter));
// → "2:30 PM"

// Custom pattern
DateTimeFormatter customFormatter = DateTimeFormatter.ofPattern(
    "EEE, MMM d, yyyy 'at' h:mm a",
    Locale.US
);
System.out.println(dt.format(customFormatter));
// → "Wed, Nov 5, 2025 at 2:30 PM"

📝 Common Date/Time Format Patterns

When you need custom formats, most libraries use similar pattern strings based on Unicode LDML.

Pattern Reference

Symbol	Meaning	Example
`y / yyyy`	Year	2025
`M / MM`	Month (numeric)	11 / 11
`MMM / MMMM`	Month (text)	Nov / November
`d / dd`	Day of month	5 / 05
`E / EEEE`	Day of week	Wed / Wednesday
`h / hh`	Hour (12-hour)	2 / 02
`H / HH`	Hour (24-hour)	14 / 14
`m / mm`	Minute	30 / 30
`s / ss`	Second	0 / 00
`a`	AM/PM marker	PM
`z / zzzz`	Time zone	PST / Pacific Standard Time

Example: "MMM d, yyyy 'at' h:mm a" → "Nov 5, 2025 at 2:30 PM"

⚠️ Common Pitfalls & Solutions

❌ Pitfall 1: Ambiguous Numeric Dates

Problem: Dates like 03/04/2025 are ambiguous.

✅ Solution: Use long format with month names ("March 4, 2025" or "4 March 2025") or ISO 8601 (2025-03-04) for unambiguous display.

❌ Pitfall 2: Hard-coded Date Formats

// ❌ Wrong: Hard-coded format
const dateStr = `${month}/${day}/${year}`;  // US-only!

// ✅ Right: Locale-aware formatting
const dateStr = new Intl.DateTimeFormat(userLocale, {
  year: 'numeric',
  month: 'numeric',
  day: 'numeric'
}).format(date);

❌ Pitfall 3: Ignoring User's Time Zone

Problem: Displaying "Meeting at 3:00 PM" without specifying the time zone confuses remote users.

✅ Solution: Always include the time zone name when displaying times: "3:00 PM EST" or convert to user's local time.

🎯 Best Practices Checklist

Practice	Priority
✅ Use locale-aware date/time formatting libraries	CRITICAL
✅ Store dates in UTC (see Time Zones topic)	CRITICAL
✅ Use month names or ISO 8601 to avoid ambiguity	HIGH
✅ Always display time zone when showing times	HIGH
✅ Respect user's 12-hour vs 24-hour preference	MEDIUM
✅ Test with multiple locales (US, UK, German, Japanese)	HIGH
✅ Use relative times where appropriate ("2 hours ago")	MEDIUM
✅ Provide date pickers that respect locale formats	HIGH

📚 Additional Resources

ISO 8601: International date/time standard
Unicode LDML: Locale Data Markup Language for date patterns
Intl.DateTimeFormat (JavaScript): MDN documentation
Babel (Python): Date and time formatting
java.time (Java): Modern date-time API
Moment.js / Luxon: Popular JavaScript date libraries

Next Topic: Language & Region Identifiers →

🕐 | Regional Time Zone Systems

💰 | Number & Currency Formatting

📅 | Date & Time Formatting

🏷️ | Language & Region Identifiers

📆 | Start Day of the Week

📅 | Date & Time Formatting

🎯 Learning Objectives

🌍 The Date Format Challenge

⚠️ Critical Insight

Common Date Format Patterns

🕐 Time Format Variations

Time Format Examples (2:30 PM)

12-Hour Format Regions

24-Hour Format Regions

💻 Implementation Guidelines

JavaScript Examples

Date Formatting

Time Formatting

Combined Date & Time Formatting

Python Examples

Using Babel for Date/Time Formatting

Java Examples

Using java.time for Date/Time Formatting

📝 Common Date/Time Format Patterns

Pattern Reference

⚠️ Common Pitfalls & Solutions

❌ Pitfall 1: Ambiguous Numeric Dates

❌ Pitfall 2: Hard-coded Date Formats

❌ Pitfall 3: Ignoring User's Time Zone

🎯 Best Practices Checklist

📚 Additional Resources