How to Format Date in JavaScript

Use date formatting when a raw Date object is too technical for users to read. The cleanest default is toLocaleDateString() because it handles readable output without manual string building.

What you’ll build or solve

You’ll learn how to format dates in JavaScript using built-in date formatting methods. You’ll also know how to create readable formats like MM/DD/YYYY, long month names, and custom numeric layouts.

When this approach works best

This approach is the right choice when dates need to appear clearly in the UI instead of as full raw timestamps.

Common real-world scenarios include:

• Blog publish dates
• Dashboard reports
• Order summaries
• Event cards
• Message timestamps

This is a bad idea when you need strict timezone control across many regions. In that case, use explicit locale and timezone options or a date library.

Prerequisites

You only need:

• A JavaScript file or browser console
• A basic Date object
• Basic JavaScript knowledge

Step-by-step instructions

Step 1: Format the date with built-in methods

Start with a Date object.

const date = new Date();

Use toLocaleDateString() for readable date output.

const formattedDate = date.toLocaleDateString();
console.log(formattedDate);

For more control, pass formatting options.

const longDate = date.toLocaleDateString("en-US", {
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(longDate);

Use manual getters only when you need a fixed custom numeric format.

const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");

const customDate = `${month}/${day}/${year}`;
console.log(customDate);

What to look for:

• toLocaleDateString() is the cleanest default
• Formatting options control month, day, and year style
• getMonth() starts at 0
• padStart() keeps numeric dates two digits long
• Manual formatting is best for exact fixed layouts

Examples you can copy

Short local date

const date = new Date();
const result = date.toLocaleDateString();

Long readable date

const date = new Date();

const result = date.toLocaleDateString("en-US", {
  month: "long",
  day: "numeric",
  year: "numeric"
});

Custom YYYY-MM-DD format

const date = new Date();

const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");

const result = `${year}-${month}-${day}`;

Common mistakes and how to fix them

Mistake 1: Forgetting that getMonth() starts at 0

What the reader might do:

const month = date.getMonth();

Why it breaks: January becomes 0, February becomes 1, and the displayed month is always one behind.

Corrected approach:

const month = date.getMonth() + 1;

Mistake 2: Building numeric dates without zero padding

What the reader might do:

const result = `${month}/${day}/${year}`;

Why it breaks: dates like 3/7/2026 may look inconsistent next to 12/17/2026.

Corrected approach:

const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");

Mistake 3: Using raw Date output for UI display

What the reader might do:

console.log(date);

Why it breaks: raw date output is harder to read and includes extra time and timezone details.

Corrected approach:

console.log(date.toLocaleDateString());

Troubleshooting

If the month looks wrong, add 1 to getMonth().

If numeric dates look uneven, use padStart().

If the format changes across users, pass an explicit locale like "en-US".

If the result includes too much technical detail, switch from raw Date output to toLocaleDateString().

Quick recap

• Use toLocaleDateString() for readable dates
• Pass locale options for more control
• Add 1 to getMonth()
• Use padStart() for fixed numeric formats
• Use manual formatting only when the layout must be exact