How to Get Current Formatted Date as dd/mm/yyyy in JavaScript

Working with dates is a common task in JavaScript, and formatting them in a specific way is often required. One of the most commonly used date formats is dd/mm/yyyy. In this article, we’ll explore various methods to get the current date formatted as dd/mm/yyyy using JavaScript.

Method 1: Using Native JavaScript Methods

JavaScript's Date object provides methods to get the day, month, and year components of the current date. Here’s how you can format them into dd/mm/yyyy:

const getFormattedDate = () => {
const today = new Date();
const day = String(today.getDate()).padStart(2, '0'); // Ensures 2-digit format
const month = String(today.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
const year = today.getFullYear();

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

console.log(getFormattedDate()); // Example output: "17/04/2025"

Explanation:

  • getDate() retrieves the day of the month.
  • getMonth() retrieves the month (0-indexed, so we add 1).
  • getFullYear() retrieves the full year.
  • padStart(2, '0') ensures that single-digit days or months are padded with a leading zero.

Method 2: Using toLocaleDateString with Options

The toLocaleDateString method is a convenient way to format dates based on a locale. By providing specific options, you can directly get the dd/mm/yyyy format.

const getFormattedDate = () => {
const today = new Date();
return today.toLocaleDateString('en-GB'); // 'en-GB' locale uses day/month/year format
};

console.log(getFormattedDate());
// Example output: "17/04/2025"

Explanation:

  • The en-GB locale represents the British English format, which uses dd/mm/yyyy.
  • This method is concise and does not require manually extracting and formatting components.

Method 3: Using a Utility Library (e.g., date-fns)

For more complex date manipulations, libraries like date-fns simplify the process. Here’s how you can use it:

  1. Install date-fns (if you haven’t already):
    2. npm install date-fns
  2. They handle edge cases (e.g., time zones, invalid dates) more effectively than native methods.
    3. import { format } from 'date-fns';

const getFormattedDate = () => {
return format(new Date(), 'dd/MM/yyyy');
};

console.log(getFormattedDate()); // Example output: "17/04/2025"

Why Use Libraries?

  • Libraries like date-fns provide robust date-handling capabilities.
  • They handle edge cases (e.g., time zones, invalid dates) more effectively than native methods.

Comparison of Methods

Method Pros Cons
Native JavaScript No dependencies, works out-of-the-box Requires manual formatting
toLocaleDateString Concise, locale-aware Limited customization
date-fns Easy to use, handles complex scenarios Requires additional dependency

Best Practice Recommendation

  • Use toLocaleDateString for quick and easy formatting.
  • Use date-fns or similar libraries for complex date operations or in projects where such libraries are already in use.

Conclusion

Formatting the current date as dd/mm/yyyy in JavaScript can be accomplished in several ways, ranging from native methods to third-party libraries. Your choice of method depends on your project’s requirements and the complexity of your date-handling needs.

Try the above examples and choose the one that fits your workflow best!

Next Article ❯
Next ❯ ❮ Previous