Format Date and Time

Format dates in various formats

BeginnerTopic: Date/Time Programs
Back

JavaScript Format Date and Time Program

This program helps you to learn the fundamental structure and syntax of JavaScript programming.

Try This Code
// 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

Understanding Format Date and Time

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

Let us now understand every line and the components of the above program.

Note: To write and run JavaScript programs, you need to set up the local environment on your computer. Refer to the complete article Setting up JavaScript Development Environment. If you do not want to set up the local environment on your computer, you can also use online IDE to write and run your JavaScript programs.

Table of Contents