How to format Date/Time in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 7, 2022

banner

Check out my new book

Format Date/Time in TypeScript #

You can format date/time in TypeScript, by using any of the built-in methods on the Date object or creating a reusable function that formats the date according to your requirements by leveraging built-in methods like getFullYear, getMonth, etc.

index.ts
// ✅ Using built in methods const date = new Date(); console.log(date.toLocaleString()); // 👉️ "3/7/2022, 4:11:58 PM" console.log(date.toLocaleDateString()); // 👉️ "3/7/2022" console.log(date.toLocaleTimeString()); // 👉️ "3/7/2022" console.log(date.toUTCString()); // 👉️ "Mon, 07 Mar 2022 14:12:34 GMT" // ✅ Format using reusable function function padTo2Digits(num: number) { return num.toString().padStart(2, '0'); } // 👇️ format as "YYYY-MM-DD hh:mm:ss" // You can tweak formatting easily function formatDate(date: Date) { return ( [ date.getFullYear(), padTo2Digits(date.getMonth() + 1), padTo2Digits(date.getDate()), ].join('-') + ' ' + [ padTo2Digits(date.getHours()), padTo2Digits(date.getMinutes()), padTo2Digits(date.getSeconds()), ].join(':') ); } const result = formatDate(new Date()); console.log(result); // 👉️ "2022-03-07 16:10:22"

The first approach that is shown in the code snippet uses built-in methods on the Date object to format the Date and time.

There are many built-in methods on the Date object. The name of the methods that format the date to something usually start with to*, e.g. toLocaleString or toUTCString().

If none of the built-in methods offer the formatting you need, you can create a reusable function that formats the date according to your use case.

The following function uses built-in methods to get the year, month, date, hour, minutes and seconds of a specific date and formats it as YYYY-MM-DD hh:mm:ss.

You could easily adjust the formatting of the date and time, or even remove the time component. You can simply reorder the elements in the arrays, remove the ones you don't need, or change the separator from a hyphen -, e.g. to forward slash /.

index.ts
// ✅ Format using reusable function function padTo2Digits(num: number) { return num.toString().padStart(2, '0'); } // 👇️ format as "YYYY-MM-DD hh:mm:ss" // You can tweak formatting easily function formatDate(date: Date) { return ( [ date.getFullYear(), padTo2Digits(date.getMonth() + 1), padTo2Digits(date.getDate()), ].join('-') + ' ' + [ padTo2Digits(date.getHours()), padTo2Digits(date.getMinutes()), padTo2Digits(date.getSeconds()), ].join(':') ); } const result = formatDate(new Date()); console.log(result); // 👉️ "2022-03-07 16:10:22"

The first thing we did is create a padTo2Digits function, which will take care of adding a leading zero if the month, day, hours, minutes or seconds only contain a single digit (are less than 10).

We want to make sure that the result is always consistent and has 2 digits for the months, days, hours, minutes and seconds, so we used the padStart method.

Next, we created a function that takes a date and formats it to yyyy-mm-dd hh:mm:ss.

The function makes use of the following 6 Date related methods.

  • Date.getFullYear method - returns a four-digit number representing the year that corresponds to a date.

  • Date.getMonth - returns an integer between 0 (January) and 11 (December) and represents the month for a given date. Yes, unfortunately the getMonth method is off by 1.

  • Date.getDate - returns an integer between 1 and 31 representing the day of the month for a specific date.

  • Date.getHours - returns the hour for the specified date.

  • Date.getMinutes - returns the minutes for a date.

  • Date.getSeconds - returns the seconds of a specific date.

The getMonth method returns a zero-based month index from 0 to 11, meaning January is 0 and December is 11.

The getMonth method is zero-based, so we added 1 to its return value.

We placed the year, month and day in an array, so we can join them with a hyphen separator.

index.ts
console.log(['2023', '04', '28'].join('-')); // 👉️ '2023-04-28' console.log(['2025', '07', '19'].join('-')); // 👉️ '2025-07-19'

This gets us the date formatted as yyyy-mm-dd.

The next step is to place the return values from the time-related methods in an array and join them with a colon.

index.ts
console.log(['07', '30', '45'].join(':')); // 👉️ '07:30:45' console.log(['09', '16', '51'].join(':')); // 👉️ '09:16:51'

We used the addition (+) operator to add a space in the middle of the strings to get the date formatted as yyyy-mm-dd hh:mm:ss.

You could easily reorder the elements in the two arrays or change the separator from a hyphen to a forward slash to format the date differently.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.