How to Change the Date Format in JavaScript

In this article, we’ll see how you can change the format of date in JavaScript. We’ll go through a couple of real-world examples to demonstrate how you can convert a date from one format to another in JavaScript.-

JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing tips and tricks to help you in your day-to-day JavaScript development.

For date and time, JavaScript provides the built-in Date object, which primarily represents the current date and time in the timestamp format. The Date object also allows you to initialize a specific date, which is in one of the standard formats. Once you instantiate a Date object, it provides several utility methods that allows you to get various components of the date and time, and you can use these various methods to format a date in different ways.

However, when it comes to changing a date from one format to another format, there’s no straightforward way to convert a date to your desired format. In this article, I’ll show you how to build a utility function, which allows you to convert a date from one format to another format. In the end, we’ll also discuss one of the popular third-party libraries, which allows you to change a date in different formats.

How to Change the Date Format in Vanilla JavaScript

In this section, we’ll build an example which allows you to change the date format in JavaScript.

Let’s have a quick look at the following example.

As you can see, we’ve implemented the dateFormat function, which takes two arguments. The first argument is the source date, and the second argument is the desired date format to which the source date will be converted. It’s important to note that the second argument must be a valid date format containing "dd", "MM" and "yy" or "yyyy".

Now, let’s go through the dateFormat function. Firstly, we’ve instantiated the Date object by passing the source date as the first argument of the constructor.

Next, we’ve used the getMonth, getDate(), and getYear() methods of the Date object to get the date components. It’s important to note that the month value starts with zero, so we’ve to increment the value by one to get the actual month. We’ve also used the padStart method to format the month value with a leading zero if it’s needed. We do something similar with the year and day values.

With everything in place, you should be able to convert a date to your desired format.

Popular Date Manipulation Libraries

When it comes to date manipulation in JavaScript, there are a lot of third-party libraries available. Some of the most popular options are Moment.js, Day.js. When it comes to formatting a date into a custom format, DateJS and Moment.js libraries are really easy to use.

Let’s have a quick look at the Moment.js example to understand how it works.

As you can see, it’s fairly easy to convert a date into different formats with the use of this third-party library.

Conclusion

Today, we looked at a couple ways to change a date from one format to another format in JavaScript: a custom function and a third-party library.