Format Date and Time
Format dates in various formats
BeginnerTopic: Date/Time Programs
JavaScript Format Date and Time Program
This program helps you to learn the fundamental structure and syntax of JavaScript programming.
// 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.