Skip to main content

How to Format a Date as DD/MM/YYYY in JavaScript

Formatting a Date object into a specific string format like DD/MM/YYYY is a very common requirement, especially for UIs in regions that use this convention. While JavaScript's Date object doesn't have a single, direct method for this, you can easily create a reliable formatting function by composing its built-in "getter" methods.

This guide will teach you the most robust "vanilla JavaScript" method for creating this format. You will also learn about a clever but unreliable shortcut and understand when it's better to use a dedicated date library.

The most reliable way to format a date is to get each of its numeric components—the day, month, and year—and then join them together with the correct padding and separators. This method is guaranteed to work consistently across all browsers and environments.

The logic:

  1. Get the Day: Use the getDate() method to get the day of the month (1-31).
  2. Get the Month: Use the getMonth() method. This method is zero-based (0 = January), so you must add 1 to get the correct month number.
  3. Get the Year: Use the getFullYear() method to get the four-digit year.
  4. Pad and Join: Ensure the day and month are two digits by padding them with a leading zero if necessary, then join the components with slashes.

The Reusable formatDate Function​

For clean and maintainable code, you should encapsulate this logic in a reusable function.

For example, we have a Date object and need to convert it into a DD/MM/YYYY string.

// Problem: How to format this Date object as "24/07/2023"?
const myDate = new Date(2023, 6, 24); // July 24, 2023

Solution:

function formatDate(date) {
  const day = String(date.getDate()).padStart(2, '0');
  
  // Remember to add 1 to the month, as it is 0-indexed
  const month = String(date.getMonth() + 1).padStart(2, '0');
  
  const year = date.getFullYear();

  return `${day}/${month}/${year}`;
}

// Example Usage:
const myDate = new Date(2023, 6, 24);
console.log(formatDate(myDate)); // Output: 24/07/2023

// Example with the current date (suppose today date is 18 October 2025)
const today = new Date();
console.log(formatDate(today));  // Output: 18/10/2025

How it works:

  • String(...).padStart(2, '0') is the key to the formatting. It converts the number to a string and then ensures the string is at least two characters long, adding a 0 to the start if necessary. This correctly handles a date like the 9th of the month, converting 9 to "09".

A Note on an Unreliable Shortcut (toLocaleString)​

You might see a clever one-liner that uses the en-GB (British English) locale to get this format, as it's the standard in that region.

const myDate = new Date();

// This often works, but it's not guaranteed.
const result = myDate.toLocaleDateString('en-GB');
console.log(result); // Output in many browsers: "18/10/20253"
note

Why this is not recommended: The output of toLocaleString() is implementation-dependent and can vary across browsers, operating systems, and even future browser updates. Relying on a specific locale to produce a specific machine-readable format is a fragile hack. The manual formatting method is guaranteed to be consistent everywhere.

The Production-Ready Solution: Using a Library​

While manual formatting is robust, for any serious application with complex date needs (like handling timezones or multiple locales), using a battle-tested date library like date-fns is the recommended best practice.

Solution with date-fns:

import { format } from 'date-fns';

const myDate = new Date();
const formattedDate = format(myDate, 'dd/MM/yyyy');

console.log(formattedDate); // Output: "27/10/2023"
note

Libraries like date-fns provide powerful and readable parsing and formatting functions that eliminate the guesswork and potential bugs of manual date handling.

Conclusion​

Formatting a Date object as a DD/MM/YYYY string is a common task with a clear, reliable solution.

  • The most reliable "vanilla JavaScript" method is to manually get the components using getDate(), getMonth() + 1, and getFullYear(), and then use padStart() to ensure correct formatting.
  • Avoid locale-based shortcuts like toLocaleString('en-GB') for generating machine-readable date strings, as their output is not guaranteed to be consistent.
  • For production applications, using a dedicated date library like date-fns is the recommended best practice for its power, readability, and reliability.

Table of Contents