How To Convert Date To String In TypeScript?

As a developer working on a project for a US-based company, I recently faced an issue where I needed to display dates in a specific format on the user interface. After researching, I found several effective ways to do this. In this tutorial, I will explain how to convert a date to a string in TypeScript with detailed examples.

Table of Contents

Date Object in TypeScript

Let me first help you understand the date object in TypeScript. The Date object is the foundation of TypeScript’s date and time functionality. It provides methods for creating, manipulating, and formatting dates and times. To create a new Date object, you can use the following syntax:

const currentDate = new Date();

This will create a Date object representing the current date and time.

Convert Date to String using toString() in TypeScript

One of the simplest ways to convert a date to a string in TypeScript is by using the toString() method. The toString() method is available on every JavaScript object, including the Date object. It returns a string representation of the object. Here’s an example:

const today = new Date();
const dateString = today.toString();
console.log(dateString);

In this example, we create a Date object called today and then call the toString() method on it. The resulting string includes the day of the week, month, date, year, time, and time zone information.

Here is the exact output in the screenshot below:

Convert Date to String using toString in TypeScript

Check out Check if a String Contains a Substring in TypeScript

Format Date using toLocaleDateString()

While the toString() method provides a quick way to convert a date to a string, it may not always match the desired format. TypeScript offers the toLocaleDateString() method, which allows you to format the date based on the user’s locale. Here’s an example:

const independenceDay = new Date("July 4, 2025");
const formattedDate = independenceDay.toLocaleDateString("en-US");
console.log(formattedDate);

In this example, we create a Date object representing July 4, 2025 (Independence Day in the USA). By calling the toLocaleDateString() method with the “en-US” locale, we get a formatted date string in the American format: “month/day/year”.

The exact output is in the screenshot below, after I executed the above TypeScript code.

Check out Convert String to Date in TypeScript

Custom Date Formatting with toLocaleString()

If you need more control over the date format, you can use the toLocaleString() method. This method allows you to specify various options to customize the date and time format. Here’s an example:

const thanksgiving = new Date("November 28, 2025");
const options = { 
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
};
const formattedDate = thanksgiving.toLocaleString("en-US", options);
console.log(formattedDate);
// Output: "Thursday, November 28, 2025"

In this example, we create a Date object for Thanksgiving Day in 2025. We define an options object specifying the desired weekday, year, month, and day format. We get a custom-formatted date string by passing the options to the toLocaleString() method and the “en-US” locale.

Check out Remove a Character from a String in TypeScript

Extract Date Components in TypeScript

Sometimes, you may need to extract specific date components, such as the year, month, or day, and convert them to strings. TypeScript provides methods like getFullYear(), getMonth(), and getDate() to accomplish this. Here’s an example:

const christmas = new Date("December 25, 2025");
const year = christmas.getFullYear().toString();
const month = (christmas.getMonth() + 1).toString().padStart(2, "0");
const day = christmas.getDate().toString().padStart(2, "0");
const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate);
// Output: "2025-12-25"

In this example, we create a Date object for Christmas Day in 2025. We extract the year using getFullYear() and convert it to a string. For the month, we use getMonth(), which returns a zero-based index (0-11), so we add 1 to get the actual month number.

We then convert it to a string and pad it with leading zeros using padStart() to ensure a two-digit format. Similarly, we extract the day using getDate(), convert it to a string, and pad it with zeros if necessary.

Finally, we concatenate the year, month, and day components to create a formatted date string in the “YYYY-MM-DD” format.

Read Check if a String is a Number in TypeScript

Using Third-Party Libraries for Date Formatting in TypeScript

While TypeScript provides built-in methods for date formatting, sometimes you may need more advanced formatting options or support for different locales. In such cases, you can leverage third-party libraries like Moment.js or date-fns. These libraries offer a wide range of functions for parsing, manipulating, and formatting dates. Here’s an example using Moment.js:

import * as moment from "moment";

const newYear = new Date("January 1, 2025");
const formattedDate = moment(newYear).format("MMMM Do YYYY");
console.log(formattedDate);
// Output: "January 1st 2025"

In this example, we import the Moment.js library and create a Date object for New Year’s Day in 2025. We then pass the Date object to the moment() function, which creates a Moment object. Finally, we use the format() method provided by Moment.js to specify the desired format for the date string.

Conclusion

In this article, I have explained various methods to convert dates to strings in TypeScript, including toString(), toLocaleDateString(), toLocaleString(), and extracting date components. We also discussed how third-party libraries like Moment.js can provide additional formatting options.

I hope this tutorial has given you a detailed understanding of converting dates to strings in TypeScript.