How to Convert a Date Object to DD-MM-YYYY Format in JavaScript

Formatting a Date object to the DD-MM-YYYY format is a common requirement in JavaScript, especially when displaying dates in a human-readable format. This guide will cover various methods to achieve this conversion, including manual formatting and using libraries.

let date = new Date();
let formattedDate = `${String(date.getDate()).padStart(2, '0')}-${String(date.getMonth() + 1).padStart(2, '0')}-${date.getFullYear()}`;
console.log(formattedDate); // Example: "13-08-2024"

To convert a Date object to DD-MM-YYYY format, manually extract the date components and format them as a string:

Working with dates is a common task in web development. Often, you may need to display a date in the DD-MM-YYYY format, which is widely used in many countries. JavaScript provides the tools to extract and format date components manually or by using libraries for more complex formatting.

Manual Formatting

Manual formatting involves extracting the day, month, and year from a Date object and then combining them into the desired format.

Example 1: Basic Conversion to DD-MM-YYYY

let date = new Date();
let day = String(date.getDate()).padStart(2, '0');
let month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
let year = date.getFullYear();

let formattedDate = `${day}-${month}-${year}`;
console.log(formattedDate); // Example: "13-08-2024"

Explanation:

• date.getDate() returns the day of the month.
• date.getMonth() returns the month (0-indexed, so we add 1).
• date.getFullYear() returns the full year.
• padStart(2, '0') ensures that the day and month are always two digits.

Using a Helper Function

Creating a helper function can make this process reusable and cleaner in your codebase.

Example 2: Reusable Date Formatting Function

function formatDateToDDMMYYYY(date) {
  let day = String(date.getDate()).padStart(2, '0');
  let month = String(date.getMonth() + 1).padStart(2, '0');
  let year = date.getFullYear();
  
  return `${day}-${month}-${year}`;
}

let date = new Date();
let formattedDate = formatDateToDDMMYYYY(date);
console.log(formattedDate); // Example: "13-08-2024"

Explanation:

• The formatDateToDDMMYYYY function encapsulates the formatting logic, making it reusable for any Date object.

Using External Libraries

For more complex date formatting needs, libraries like moment.js (though deprecated) or date-fns provide robust solutions.

Example 3: Using moment.js (Deprecated but Still Popular)

// Include moment.js in your project
let date = new Date();
let formattedDate = moment(date).format('DD-MM-YYYY');
console.log(formattedDate); // Example: "13-08-2024"

Explanation:

• moment.js allows you to easily format dates using the format() method with a format string.

Note: moment.js is deprecated, and it’s recommended to use date-fns or native JavaScript methods for new projects.

Conclusion

Converting a Date object to the DD-MM-YYYY format in JavaScript can be accomplished in several ways. The manual method gives you full control and is straightforward for this specific format. A helper function can make the code reusable, while libraries like moment.js or date-fns can simplify formatting in more complex scenarios.

By mastering these techniques, you can ensure that dates are consistently and accurately formatted in your JavaScript applications.