JS Date Formats

JavaScript Date Formatting Methods

When you create a standard Date object in JavaScript, printing it out directly can look a bit messy and confusing for a normal user. It usually outputs something long like this: Wed Aug 15 2024 14:35:22 GMT+0200 (Central European Summer Time).

Most of the time, you will want to format this date to look much cleaner. JavaScript provides several built-in Date Formatting Methods to easily convert date objects into readable strings.

1. Basic String Conversion Methods

The simplest way to format a date is to use one of the basic string conversion methods to strip away the parts you don't need.

const d = new Date();

console.log(d.toDateString()); 
// Outputs something like: Thu Sep 12 2024
console.log(d.toTimeString()); 
// Outputs something like: 10:30:15 GMT-0400 (Eastern Daylight Time)

2. Standardized Formats: UTC and ISO

When you are saving a date to a database or sending it to a server, you should almost always use a standardized time format. This prevents bugs caused by users being in different time zones.

• toISOString(): This is the gold standard for web development. It converts the date to a string following the ISO 8601 extended format.
• toUTCString(): Converts the date to a string formatted according to the UTC time zone.

const d = new Date();

// ISO Format (Best for databases!)
console.log(d.toISOString()); 
// Outputs: 2024-09-12T14:30:15.123Z
// UTC Format
console.log(d.toUTCString()); 
// Outputs: Thu, 12 Sep 2024 14:30:15 GMT

3. Localized Formatting (The Magic of toLocaleString)

If you want to display a date to a user based on exactly where they live in the world, JavaScript has a powerful set of localized methods:

• toLocaleString(): Formats both the date and time based on local rules.
• toLocaleDateString(): Formats just the date based on local rules.
• toLocaleTimeString(): Formats just the time based on local rules.

const d = new Date();

// Formats based on the user's browser settings
console.log(d.toLocaleDateString()); 

Customizing the Locale Output

The toLocaleString() methods are incredibly flexible. You can pass arguments to force a specific language (like "en-US" for America or "en-GB" for the UK), and you can pass an options object to customize exactly how the date looks!

const d = new Date();

// Define how we want the date to look
const options = { 
    weekday: 'long', 
    year: 'numeric', 
    month: 'long', 
    day: 'numeric' 
};
// Format the date for US English using our options
console.log(d.toLocaleDateString("en-US", options));
// Outputs: Thursday, September 12, 2024

Using toLocaleDateString with an options object is currently the most professional and modern way to display easily readable dates in JavaScript!