How do I format a date in JavaScript?

General
1

Hey Guys, I’m working with JavaScript dates and need to display them in a custom, readable format instead of the default output. What are the recommended ways to format a date in JavaScript?

2

This is a very common JavaScript question :slightly_smiling_face: The default Date output isn’t very friendly, so most people format it themselves.

Here are a few simple and commonly used ways:

1. Using built-in methods

const date = new Date();
date.toDateString();   // "Mon Jan 08 2026"
date.toLocaleDateString(); // based on your locale

2. Custom format using date parts

const d = new Date();
const formatted = `${d.getDate()}-${d.getMonth() + 1}-${d.getFullYear()}`;

This gives you something like 08-01-2026.

3. Using toLocaleString for readable formats

date.toLocaleString("en-IN", {
  day: "2-digit",
  month: "short",
  year: "numeric"
});

4. Using libraries (optional)
If formatting gets complex, libraries like dayjs or date-fns make it easier, but for simple cases, vanilla JS is enough.

Most of the time, toLocaleDateString() or building a small custom format works perfectly.

1 Like
3

In JavaScript, dates are handled using the built-in Date object, and formatting depends on how you want the output to look.

The simplest and most reliable way is using toLocaleDateString(), which formats dates based on locale and options:

const date = new Date();
date.toLocaleDateString("en-IN"); // e.g., 07/01/2026

For more control, you can pass formatting options:

date.toLocaleDateString("en-US", {
  year: "numeric",
  month: "long",
  day: "2-digit"
});
// January 07, 2026

If you need full control or custom formats (like YYYY-MM-DD), you can manually extract values:

const d = new Date();
const formatted = `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}`;

For complex formatting, time zones, or consistency across apps, many developers use libraries like date-fns or Day.js instead of relying only on native methods.

1 Like