Common JavaScript Date Formats
JavaScript allows you to work with dates in different formats. These formats help you display dates in a readable way or save them in a standard form for processing.
1. ISO 8601 Format (Default)
The ISO 8601 format is the standard format for representing dates and times.
Syntax: YYYY-MM-DDTHH:mm:ss.sssZ
- YYYY: Four-digit year.
- MM: Two-digit month.
- DD: Two-digit day.
- T: Separator for date and time.
- HH:mm:ss.sss: Time in hours, minutes, seconds and milliseconds.
- Z: Indicates UTC time (optional).
Example:
const date = new Date();
console.log(date.toISOString()); // Output: 2024-11-25T08:45:30.000Z
2. Short Date Format
A short date format typically uses slashes (/) to separate parts of the date.
Syntax: MM/DD/YYYY (common in the US)
Example:
const date = new Date();
console.log(date.toLocaleDateString("en-US")); // Output: 11/25/2024
Syntax: DD/MM/YYYY (common in Europe and Asia)
Example:
console.log(date.toLocaleDateString("en-GB")); // Output: 25/11/2024
3. Long Date Format
A long date format includes the full month name.
Syntax: Month DD, YYYY
Example:
const date = new Date();
console.log(date.toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" }));
// Output: November 25, 2024
4. Custom Formats with Template Strings
JavaScript does not have built-in custom date formatting, but you can achieve it by extracting components.
Example:
const date = new Date();
const customFormat = `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
console.log(customFormat); // Output: 25-11-2024
Formatting Dates in JavaScript
JavaScript provides several built-in methods to format dates into readable strings.
1. toLocaleDateString()
The toLocaleDateString() method formats dates based on a locale.
Syntax:
date.toLocaleDateString(locale, options);
Example:
const date = new Date();
console.log(date.toLocaleDateString("en-US")); // Output: 11/25/2024
console.log(date.toLocaleDateString("en-GB")); // Output: 25/11/2024
console.log(date.toLocaleDateString("ja-JP")); // Output: 2024/11/25
2. toDateString()
The toDateString() method returns a string with a simplified date format.
Example:
const date = new Date();
console.log(date.toDateString()); // Output: Mon Nov 25 2024
3. toISOString()
The toISOString() method converts a date to ISO 8601 format.
Example:
const date = new Date();
console.log(date.toISOString()); // Output: 2024-11-25T08:45:30.000Z
4. toUTCString()
The toUTCString() method converts a date to UTC format.
Example:
const date = new Date();
console.log(date.toUTCString()); // Output: Mon, 25 Nov 2024 08:45:30 GMT
5. toString()
The toString() method returns the date in the default format of the runtime environment.
Example:
const date = new Date();
console.log(date.toString()); // Output: Mon Nov 25 2024 14:15:30 GMT+0530 (IST)
Parsing and Formatting Dates with Custom Libraries
While JavaScript provides basic date handling, libraries like Moment.js and date-fns offer advanced features for parsing and formatting dates.
Example Using date-fns:
import { format } from "date-fns";
const date = new Date();
console.log(format(date, "dd/MM/yyyy")); // Output: 25/11/2024
Real-World Examples
1. Displaying Today’s Date in a Website Footer
const today = new Date();
document.getElementById("footerDate").textContent = today.toLocaleDateString("en-US");
2. Calculating and Formatting Event Countdown
function getCountdown(eventDate) {
const now = new Date();
const target = new Date(eventDate);
const diff = target - now;
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
return `${days} days left until the event`;
}
console.log(getCountdown("2024-12-31"));
3. Converting a Custom Date String to a Standard Format
function convertToISO(dateString) {
const date = new Date(dateString);
return date.toISOString();
}
console.log(convertToISO("November 25, 2024")); // Output: 2024-11-25T00:00:00.000Z