How to Format a Date in JavaScript

By the end of this page, you will understand how JavaScript Date objects work, why date formatting often requires custom code, and how to produce readable strings such as 10-Aug-2010 using beginner-friendly JavaScript techniques.

JavaScript stores dates as Date objects, but a Date object is not automatically displayed in the exact format you want.

For example, this code creates a date:

const date = new Date();

But if you print it directly, JavaScript gives a full date-time string, not a custom format like 10-Aug-2010.

console.log(date);

To get a specific output format, you usually need to:

• extract the day
• extract the month
• extract the year
• convert the month number into a short month name
• join the pieces into one string

This matters because date formatting is common in real programs:

• showing dates in dashboards
• displaying timestamps in UI
• exporting reports
• generating filenames
• formatting API data for users

A key beginner lesson is that JavaScript's Date object stores date information, while formatting is the job of your code or a formatting API such as Intl.DateTimeFormat.

Think of a Date object like a box containing date parts:

• day
• month
• year
• time
• timezone

If you want a string like 10-Aug-2010, you open the box, take out the parts you need, and arrange them in your preferred order.

It is similar to filling out a label:

• take the day number
• replace the month number with a readable name
• add the year
• connect them with -

So the main idea is: a Date object holds the information, and formatting decides how to present it.

The most beginner-friendly way is to manually build the string.

Basic syntax

const date = new Date(2010, 7, 10); // 10 August 2010

const months = [
  "Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];

const day = date.getDate();
const month = months[date.getMonth()];
const year = date.getFullYear();

const formatted = `${day}-${month}-${year}`;
console.log(formatted); // 10-Aug-2010

Why this works

• getDate() returns the day of the month
• getMonth() returns a month index from to

Consider this example:

const date = new Date(2010, 7, 10);
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

const day = String(date.getDate()).padStart(2, "0");
const month = months[date.getMonth()];
const year = date.getFullYear();

const formatted = `${day}-${month}-${year}`;
console.log(formatted);

Step by step:

1. new Date(2010, 7, 10) creates a date.

   • Year = 2010

Date formatting appears in many practical situations:

User interfaces

• Showing account creation dates
• Displaying blog post publish dates
• Rendering invoice dates

const publishedAt = new Date(2024, 2, 14);
console.log(`${publishedAt.getDate()}-${publishedAt.getMonth()}-${publishedAt.getFullYear()}`);

Reports and exports

• CSV exports with readable dates
• PDF report headers
• generated filenames

Example filename:

const date = new Date();
const fileDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
console.log(`report-.csv`);

In real projects, developers usually do more than just call getDate().

Common patterns

Small formatting helper function

Instead of repeating the same code everywhere, teams often create a reusable function:

function formatDate(date) {
  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
  const day = String(date.getDate()).padStart(2, "0");
  const month = months[date.getMonth()];
  const year = date.getFullYear();
  return `${day}-${month}-${year}`;
}

Validation before formatting

Developers often guard against invalid dates:

1. Forgetting that months are zero-based

This is one of the most common JavaScript date mistakes.

const date = new Date(2010, 8, 10);
console.log(date);

Many beginners expect August, but month 8 is actually September because:

• 0 = January
• 7 = August
• 8 = September

Use 7 for August:

const date = new Date(2010, 7, 10);

2. Using getDay() instead of getDate()

getDay() does not return the day of the month. It returns the day of the week.

Quick reference

Create a date

const date = new Date(2010, 7, 10);

• Year: 2010
• Month: 7 means August
• Day: 10

Important methods

date.getDate();      // day of month: 1-31
date.getMonth();     // month index: 0-11
date.getFullYear();  // 4-digit year
date.getDay();       // weekday index: 0-6

Month names

const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", ];

How do I format a JavaScript date as 10-Aug-2010?

Create a Date, extract the day, month, and year, convert the month number to a short name, and join them into a string.

Why does JavaScript show the wrong month sometimes?

Because months are zero-based. January is 0, August is 7, and December is 11.

Should I use getDay() or getDate()?

Use getDate() for the day of the month. getDay() returns the weekday number.

Can I format dates without a library in JavaScript?

Yes. For simple formats, built-in Date methods are enough.

What is the easiest way to add a leading zero to the day?

Use:

String(date.getDate()).padStart(2, "0")

Is Intl.DateTimeFormat better than manual formatting?

• Date object — the core JavaScript type used to store date and time values.
• String interpolation — useful for building formatted date strings with template literals.
• Arrays — often used to map month indexes to month names like Jan or Aug.
• Functions — help you reuse date-formatting logic across your codebase.
• Intl.DateTimeFormat — a built-in API for locale-aware date formatting.
• Template literals — make combining day, month, and year into one string easier.
• Validation — important for checking whether a Date is valid before formatting it.