Format Date and Time

Format dates in various formats

JavaScriptBeginner
JavaScript
// Method 1: Basic formatting
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('YYYY-MM-DD:', formatDate(new Date()));

// Method 2: Multiple formats
function formatDateMultiple(date, format) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    
    const formats = {
        'YYYY-MM-DD': `${year}-${month}-${day}`,
        'DD/MM/YYYY': `${day}/${month}/${year}`,
        'MM/DD/YYYY': `${month}/${day}/${year}`,
        'YYYY-MM-DD HH:mm:ss': `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`,
        'DD MMM YYYY': `${day} ${getMonthName(date.getMonth())} ${year}`
    };
    
    return formats[format] || formatDate(date);
}

function getMonthName(month) {
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    return months[month];
}

console.log('DD/MM/YYYY:', formatDateMultiple(new Date(), 'DD/MM/YYYY'));
console.log('DD MMM YYYY:', formatDateMultiple(new Date(), 'DD MMM YYYY'));

// Method 3: Relative time
function getRelativeTime(date) {
    const now = new Date();
    const diff = now - date;
    const seconds = Math.floor(diff / 1000);
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    const days = Math.floor(hours / 24);
    
    if (seconds < 60) return `${seconds} seconds ago`;
    if (minutes < 60) return `${minutes} minutes ago`;
    if (hours < 24) return `${hours} hours ago`;
    if (days < 7) return `${days} days ago`;
    return formatDate(date);
}

console.log('Relative:', getRelativeTime(new Date(Date.now() - 3600000)));

// Method 4: Locale formatting
const date = new Date();
console.log('en-US:', date.toLocaleDateString('en-US'));
console.log('en-GB:', date.toLocaleDateString('en-GB'));
console.log('de-DE:', date.toLocaleDateString('de-DE'));
console.log('ja-JP:', date.toLocaleDateString('ja-JP'));

// Method 5: Custom format with Intl
const formatter = new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
});

console.log('Formatted:', formatter.format(new Date()));

Output

YYYY-MM-DD: 2024-01-15
DD/MM/YYYY: 15/01/2024
DD MMM YYYY: 15 Jan 2024
Relative: 1 hours ago
en-US: 1/15/2024
en-GB: 15/01/2024
de-DE: 15.1.2024
ja-JP: 2024/1/15
Formatted: Monday, January 15, 2024

Date formatting displays dates in readable formats.

Format Patterns

  • YYYY-MM-DD: ISO format
  • DD/MM/YYYY: European format
  • MM/DD/YYYY: US format
  • Custom formats

Locale Formatting

  • toLocaleDateString: Local format
  • Intl.DateTimeFormat: Advanced
  • Supports multiple locales

Relative Time

  • "X minutes ago"
  • "X hours ago"
  • "X days ago"
  • Human-readable

Best Practices

  • Use Intl for locales
  • Handle timezones
  • Format consistently
  • Consider user locale