JavaScript Date & Time

Date Formatting

Format dates for display using Intl.DateTimeFormat and custom functions

Find videos you like?

Save to resource drawer for future reference!

Display Dates Beautifully

Format dates for user display using Intl.DateTimeFormat for locale-aware formatting or create custom formatters for specific needs.

🎓Understanding Date Formatting

📝

Why Format?

Dates need to look good for users - like "Dec 14, 2024" instead of "Sat Dec 14 2024 15:30:00..."

🌍

Different Places

US: 12/14/2024
Europe: 14/12/2024
Format changes by location!

⏰

Time Ago

Show "5 minutes ago" or "2 days ago" for better user experience

Two Ways to Format

✨

Automatic (Easy)

Use built-in Intl.DateTimeFormat

new Intl.DateTimeFormat('en-US')

✅ Best for most cases

🔧

Custom (Flexible)

Build your own formatter

year + '-' + month + '-' + day

✅ For specific formats

Common Format Patterns

For Display:

• "December 14, 2024"

• "Dec 14, 2024"

• "3:30 PM"

• "5 minutes ago"

For Systems:

• "2024-12-14" (ISO)

• "2024-12-14 15:30:00" (SQL)

• Timestamp: 1702569045

Intl.DateTimeFormat (Recommended)

Locale-aware date formatting

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Custom Date Formats

Build your own formatters

javascript

code

DarkEditable

const date = new Date('2024-12-14T15:30:45');

// YYYY-MM-DD
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}
console.log(formatDate(date));  // "2024-12-14"

// MM/DD/YYYY
function formatUSDate(date) {
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const year = date.getFullYear();
  return `${month}/${day}/${year}`;
}
console.log(formatUSDate(date));  // "12/14/2024"

// DD-MM-YYYY HH:mm:ss
function formatDateTime(date) {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${day}-${month}-${year} ${hours}:${minutes}:${seconds}`;
}
console.log(formatDateTime(date));  // "14-12-2024 15:30:45"

Console Output

Click "Run Code" to see output here...

12-Hour Format with AM/PM

Format time in 12-hour format

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Relative Time (Time Ago)

Display time relative to now

javascript

code

DarkEditable

// Examples
const now = new Date();
const fiveMinutesAgo = new Date(now - 5 * 60 * 1000);
const twoDaysAgo = new Date(now - 2 * 24 * 60 * 60 * 1000);

console.log(timeAgo(fiveMinutesAgo));  // "5m ago"
console.log(timeAgo(twoDaysAgo));      // "2d ago"

// More readable version
function timeAgoReadable(date) {
  const seconds = Math.floor((new Date() - date) / 1000);
  
  const intervals = {
    year: 31536000,
    month: 2592000,
    week: 604800,
    day: 86400,
    hour: 3600,
    minute: 60
  };
  
  for (const [name, secondsInInterval] of Object.entries(intervals)) {
    const interval = Math.floor(seconds / secondsInInterval);
    if (interval >= 1) {
      return `${interval} ${name}${interval > 1 ? 's' : ''} ago`;
    }
  }
  
  return 'just now';
}

console.log(timeAgoReadable(twoDaysAgo));  // "2 days ago"

Console Output

Click "Run Code" to see output here...

Month and Day Names

Get human-readable month/day names

javascript

code

DarkEditable

const date = new Date('2024-12-14T15:30:00');

// Month names
const monthNames = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
];

const monthShort = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];

console.log(monthNames[date.getMonth()]);  // "December"
console.log(monthShort[date.getMonth()]);  // "Dec"

// Day names
const dayNames = [
  'Sunday', 'Monday', 'Tuesday', 'Wednesday',
  'Thursday', 'Friday', 'Saturday'
];

const dayShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

console.log(dayNames[date.getDay()]);  // "Saturday"
console.log(dayShort[date.getDay()]);  // "Sat"

// Format with names
function formatWithNames(date) {
  const day = dayShort[date.getDay()];
  const month = monthShort[date.getMonth()];
  const dateNum = date.getDate();
  const year = date.getFullYear();
  return `${day}, ${month} ${dateNum}, ${year}`;
}

console.log(formatWithNames(date));  // "Sat, Dec 14, 2024"

Console Output

Click "Run Code" to see output here...

ISO and Custom Formats

Common date format patterns

javascript

code

DarkEditable

const date = new Date('2024-12-14T15:30:45.123');

// ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ)
console.log(date.toISOString());
// "2024-12-14T10:00:45.123Z"

// Date only (YYYY-MM-DD)
console.log(date.toISOString().split('T')[0]);
// "2024-12-14"

// SQL format (YYYY-MM-DD HH:mm:ss)
function toSQLFormat(date) {
  return date.toISOString().slice(0, 19).replace('T', ' ');
}
console.log(toSQLFormat(date));  // "2024-12-14 10:00:45"

// US format (MM/DD/YYYY)
function toUSFormat(date) {
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const year = date.getFullYear();
  return `${month}/${day}/${year}`;
}
console.log(toUSFormat(date));  // "12/14/2024"

// European format (DD/MM/YYYY)
function toEUFormat(date) {
  const day = date.getDate();
  const month = date.getMonth() + 1;
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
}
console.log(toEUFormat(date));  // "14/12/2024"

// Human-readable
function toReadableFormat(date) {
  const options = { 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  };
  return date.toLocaleDateString('en-US', options);
}
console.log(toReadableFormat(date));
// "December 14, 2024 at 03:30 PM"

Console Output

Click "Run Code" to see output here...

Reusable Date Formatter

Flexible formatter with format string

javascript

code

DarkEditable

function formatDate(date, format) {
  const map = {
    YYYY: date.getFullYear(),
    YY: String(date.getFullYear()).slice(-2),
    MM: String(date.getMonth() + 1).padStart(2, '0'),
    M: date.getMonth() + 1,
    DD: String(date.getDate()).padStart(2, '0'),
    D: date.getDate(),
    HH: String(date.getHours()).padStart(2, '0'),
    H: date.getHours(),
    hh: String(date.getHours() % 12 || 12).padStart(2, '0'),
    h: date.getHours() % 12 || 12,
    mm: String(date.getMinutes()).padStart(2, '0'),
    m: date.getMinutes(),
    ss: String(date.getSeconds()).padStart(2, '0'),
    s: date.getSeconds(),
    A: date.getHours() >= 12 ? 'PM' : 'AM',
    a: date.getHours() >= 12 ? 'pm' : 'am'
  };
  
  return format.replace(/YYYY|YY|MM|M|DD|D|HH|H|hh|h|mm|m|ss|s|A|a/g, match => map[match]);
}

const date = new Date('2024-12-14T15:30:45');

console.log(formatDate(date, 'YYYY-MM-DD'));           // "2024-12-14"
console.log(formatDate(date, 'MM/DD/YYYY'));           // "12/14/2024"
console.log(formatDate(date, 'DD-MM-YYYY HH:mm:ss'));  // "14-12-2024 15:30:45"
console.log(formatDate(date, 'hh:mm A'));              // "03:30 PM"
console.log(formatDate(date, 'M/D/YY'));               // "12/14/24"

Console Output

Click "Run Code" to see output here...

Common Format Patterns

ISO Format

YYYY-MM-DD

2024-12-14

US Format

MM/DD/YYYY

12/14/2024

European

DD/MM/YYYY

14/12/2024

Time 12h

hh:mm A

03:30 PM

Key Takeaways

Best Choice

Use Intl.DateTimeFormat for locale-aware formatting

📝

Custom Formats

Build your own for specific needs (SQL, APIs, etc.)

⏰

Relative Time

"5m ago" format is great for UX in social apps

🌍

ISO Format

toISOString() for APIs and databases

Previous Topic

Date Methods

Getting and setting date components.

Next Topic

Temporal API

Modern date/time API (Stage 3 proposal) for better date handling.

Ask a Question

Have a question about Date Formatting? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Date & Time

Date Formatting

Format dates for display using Intl.DateTimeFormat and custom functions

Find videos you like?

Save to resource drawer for future reference!

Display Dates Beautifully

Format dates for user display using Intl.DateTimeFormat for locale-aware formatting or create custom formatters for specific needs.

🎓Understanding Date Formatting

📝

Why Format?

Dates need to look good for users - like "Dec 14, 2024" instead of "Sat Dec 14 2024 15:30:00..."

🌍

Different Places

US: 12/14/2024
Europe: 14/12/2024
Format changes by location!

⏰

Time Ago

Show "5 minutes ago" or "2 days ago" for better user experience

Two Ways to Format

✨

Automatic (Easy)

Use built-in Intl.DateTimeFormat

new Intl.DateTimeFormat('en-US')

✅ Best for most cases

🔧

Custom (Flexible)

Build your own formatter

year + '-' + month + '-' + day

✅ For specific formats

Common Format Patterns

For Display:

• "December 14, 2024"

• "Dec 14, 2024"

• "3:30 PM"

• "5 minutes ago"

For Systems:

• "2024-12-14" (ISO)

• "2024-12-14 15:30:00" (SQL)

• Timestamp: 1702569045

Intl.DateTimeFormat (Recommended)

Locale-aware date formatting

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Custom Date Formats

Build your own formatters

javascript

code

DarkEditable

const date = new Date('2024-12-14T15:30:45');

Console Output

Click "Run Code" to see output here...

12-Hour Format with AM/PM

Format time in 12-hour format

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Relative Time (Time Ago)

Display time relative to now

javascript

code

DarkEditable

// Examples
const now = new Date();
const fiveMinutesAgo = new Date(now - 5 * 60 * 1000);
const twoDaysAgo = new Date(now - 2 * 24 * 60 * 60 * 1000);

console.log(timeAgo(fiveMinutesAgo));  // "5m ago"
console.log(timeAgo(twoDaysAgo));      // "2d ago"

console.log(timeAgoReadable(twoDaysAgo));  // "2 days ago"

Console Output

Click "Run Code" to see output here...

Month and Day Names

Get human-readable month/day names

javascript

code

DarkEditable

const date = new Date('2024-12-14T15:30:00');

// Month names
const monthNames = [
  'January', 'February', 'March', 'April', 'May', 'June',
  'July', 'August', 'September', 'October', 'November', 'December'
];

const monthShort = [
  'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
];

console.log(monthNames[date.getMonth()]);  // "December"
console.log(monthShort[date.getMonth()]);  // "Dec"

// Day names
const dayNames = [
  'Sunday', 'Monday', 'Tuesday', 'Wednesday',
  'Thursday', 'Friday', 'Saturday'
];

const dayShort = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

console.log(dayNames[date.getDay()]);  // "Saturday"
console.log(dayShort[date.getDay()]);  // "Sat"

console.log(formatWithNames(date));  // "Sat, Dec 14, 2024"

Console Output

Click "Run Code" to see output here...

ISO and Custom Formats

Common date format patterns

javascript

code

DarkEditable

const date = new Date('2024-12-14T15:30:45.123');

// ISO 8601 (YYYY-MM-DDTHH:mm:ss.sssZ)
console.log(date.toISOString());
// "2024-12-14T10:00:45.123Z"

// Date only (YYYY-MM-DD)
console.log(date.toISOString().split('T')[0]);
// "2024-12-14"

// SQL format (YYYY-MM-DD HH:mm:ss)
function toSQLFormat(date) {
  return date.toISOString().slice(0, 19).replace('T', ' ');
}
console.log(toSQLFormat(date));  // "2024-12-14 10:00:45"

Console Output

Click "Run Code" to see output here...

Reusable Date Formatter

Flexible formatter with format string

javascript

code

DarkEditable

const date = new Date('2024-12-14T15:30:45');

Console Output

Click "Run Code" to see output here...

Common Format Patterns

ISO Format

YYYY-MM-DD

2024-12-14

US Format

MM/DD/YYYY

12/14/2024

European

DD/MM/YYYY

14/12/2024

Time 12h

hh:mm A

03:30 PM

Key Takeaways

Best Choice

Use Intl.DateTimeFormat for locale-aware formatting

📝

Custom Formats

Build your own for specific needs (SQL, APIs, etc.)

⏰

Relative Time

"5m ago" format is great for UX in social apps

🌍

ISO Format

toISOString() for APIs and databases

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Date Methods

Temporal API

JavaScript Code Editor

Building Your Learning Module...

Date Formatting

Display Dates Beautifully

Why Format?

Different Places

Time Ago

Two Ways to Format

Automatic (Easy)

Custom (Flexible)

Common Format Patterns

Intl.DateTimeFormat (Recommended)

Custom Date Formats

12-Hour Format with AM/PM

Relative Time (Time Ago)

Month and Day Names

ISO and Custom Formats

Reusable Date Formatter

Key Takeaways

Best Choice

Custom Formats

Relative Time

ISO Format

Date Methods

Temporal API

JavaScript Code Editor

Date Formatting

Display Dates Beautifully

Why Format?

Different Places

Time Ago

Two Ways to Format

Automatic (Easy)

Custom (Flexible)

Common Format Patterns

Intl.DateTimeFormat (Recommended)

Custom Date Formats

12-Hour Format with AM/PM

Relative Time (Time Ago)

Month and Day Names

ISO and Custom Formats

Reusable Date Formatter

Key Takeaways

Best Choice

Custom Formats

Relative Time

ISO Format