JavaScript Date Formats

JavaScript provides multiple ways to format and parse dates. Understanding date formats is essential for handling dates from APIs, databases, and user input.

ISO Date Format

The ISO 8601 format is the international standard for date and time representation. It is the most reliable format across all browsers and is the format returned by toISOString().

ISO Date Formats
// Full ISO format (YYYY-MM-DDTHH:mm:ss.sssZ)
const d1 = new Date("2024-06-15T10:30:00.000Z");
console.log(d1.toISOString());

// Date only (YYYY-MM-DD)
const d2 = new Date("2024-06-15");
console.log(d2.toISOString());

// Year and month only (YYYY-MM)
const d3 = new Date("2024-06");
console.log(d3.toISOString());

// Year only (YYYY)
const d4 = new Date("2024");
console.log(d4.toISOString());
📝 Note: The 'T' separates the date from the time. The 'Z' indicates UTC. Without 'Z', the date is interpreted as local time.

Short and Long Date Formats

JavaScript also accepts short dates (MM/DD/YYYY) and long dates (Month DD YYYY or DD Month YYYY). However, these formats may behave differently across browsers.

Short and Long Dates
// Short date format
const short = new Date("06/15/2024");
console.log("Short:", short.toDateString());

// Long date format
const long1 = new Date("June 15 2024");
console.log("Long 1:", long1.toDateString());

const long2 = new Date("15 June 2024");
console.log("Long 2:", long2.toDateString());

// Abbreviated month
const long3 = new Date("Jun 15 2024");
console.log("Long 3:", long3.toDateString());
FormatExampleReliability
ISO (YYYY-MM-DD)2024-06-15Best - works everywhere
Short (MM/DD/YYYY)06/15/2024Good - US format
Long (Month DD YYYY)June 15 2024Good
Long (DD Month YYYY)15 June 2024Varies by browser

toLocaleDateString()

The toLocaleDateString() method formats a date according to the locale and optional formatting options. This is the recommended way to display dates to users.

Locale Date Formatting
const d = new Date("2024-06-15");

// Default locale
console.log(d.toLocaleDateString());

// US English
console.log(d.toLocaleDateString("en-US"));

// British English
console.log(d.toLocaleDateString("en-GB"));

// German
console.log(d.toLocaleDateString("de-DE"));

// With options
console.log(d.toLocaleDateString("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
}));

Date.parse()

Date.parse() parses a date string and returns the number of milliseconds since January 1, 1970. It returns NaN if the string is not a valid date.

Using Date.parse()
// Parse ISO date
const ms1 = Date.parse("2024-06-15");
console.log("Milliseconds:", ms1);

// Convert to Date object
const d = new Date(ms1);
console.log("Date:", d.toDateString());

// Parse invalid date
const invalid = Date.parse("not a date");
console.log("Invalid:", invalid); // NaN

// Check if date is valid
console.log("Is valid:", !isNaN(Date.parse("2024-06-15")));
console.log("Is valid:", !isNaN(Date.parse("invalid")));

Intl.DateTimeFormat

The Intl.DateTimeFormat object provides powerful and flexible date formatting with full locale support. It gives you fine-grained control over every part of the date output.

Intl.DateTimeFormat
const d = new Date("2024-06-15T14:30:00");

// Basic formatting
const fmt1 = new Intl.DateTimeFormat("en-US");
console.log(fmt1.format(d));

// Custom formatting
const fmt2 = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full",
  timeStyle: "short"
});
console.log(fmt2.format(d));

// Individual parts
const fmt3 = new Intl.DateTimeFormat("en-US", {
  weekday: "short",
  month: "short",
  day: "2-digit",
  year: "numeric",
  hour: "2-digit",
  minute: "2-digit"
});
console.log(fmt3.format(d));

// Format to parts
const parts = fmt3.formatToParts(d);
console.log(parts.map(p => p.type + ': ' + p.value));
Exercise:
Which date format is the most reliable across all browsers?
Try it YourselfCtrl+Enter to run
Click Run to see the output here.