How to Change Date Format with JavaScript

July 11th, 2023

JavaScript provides various built-in methods and functions that allow you to manipulate dates and convert them into different formats. In this blog post, we’ll explore how to change the date format using JavaScript. We’ll use a function called convertDateFormat to accomplish this task. Let’s dive in!


function convertDateFormat(inputDate) {
// Convert inputDate to a Date object
var dateObj = new Date(inputDate);
// Get the date components
var day = dateObj.getDate();
var month = dateObj.toLocaleDateString('en-US', { month: 'short' });
var year = dateObj.getFullYear();
// Concatenate the date components in the desired format
var formattedDate = `${day} ${month} ${year}`;
return formattedDate;
}


In the above code, we define a function called convertDateFormat that takes an inputDate parameter representing the date we want to format. Here’s how the function works:

1. We start by creating a new Date object using the inputDate. The Date object represents the specific date and time provided.
2. Next, we extract the individual components of the date using the getDate method, which gives us the day, and the toLocaleDateString method with the ‘en-US’ locale and { month: ‘short’ } options to get the abbreviated month name.
3. We retrieve the year using the getFullYear method.
4. Finally, we concatenate the day, month, and year together in the desired format using template literals, where the day is followed by the month and year separated by spaces.
5. The formatted date is then returned as the result of the function.

To use this convertDateFormat function, you need to provide a valid date string in the input format. Here’s an example usage:

var inputDate = "2023-05-22T15:26:08";
var formattedDate = convertDateFormat(inputDate);
console.log(formattedDate); // Output: "22 May 2023"


In the example above, we pass the inputDate string in the format of “YYYY-MM-DDTHH:MM:SS” to the convertDateFormat function. The function converts it to the desired format of “DD Month YYYY” and stores the result in the formattedDate variable. Finally, we log the formatted date to the console, which will output “22 May 2023”.

Feel free to modify the convertDateFormat function as per your specific requirements, such as changing the order of day, month, and year, using a different date separator, or displaying the full month name instead of the abbreviated form. JavaScript provides various options and methods to customize the date formatting based on your needs.

That’s it! You now know how to change the date format using JavaScript. With the convertDateFormat function, you can easily convert date strings to different formats and display them in a way that suits your application or user interface. JavaScript’s versatility and date manipulation capabilities make it a powerful tool for working with dates.

Back to our blogs