How to Convert Date to String in TypeScript?

It is common to show the date and time on the web or mobile application. As a user, have you ever seen any application which shows the date object as it is? It will never happen because it makes UX worst. So, we need to convert the date object to a string.

After converting the date object to a string, we can format it according to our needs. The date format means ‘yyyy-mm-dd’, ‘dd-mm-yyyy’, etc. Also, we can do the same with the time string. We can display the hours, minutes, seconds, and milliseconds according to the need. In this tutorial, users will learn to convert the date object to a string in TypeScript.

Using the toLocalString() method of the Date Class

The toLocaleString() method of the date object is used to convert the date object to a string according to a specific locale. Locale refers to a particular region.

Syntax

Users can follow the syntax below to convert the date object to a string using the toLocaleString() method.

let new_Date: Date = new Date();
new_Date.toLocaleString(Locale, options);

In the above syntax, we used the toLocaleString() method with the object of the date class.

Parameters

The toLocaleString() method takes the below two parameters.

• Locale − It represents the specific region. ToLocaleString() converts the date object to a string according to a specific locale.

• Options − It is an object containing different options. The toLocaleString() method returns the date string according to options.

Return Value

• The toLocaleString() method returns the date in string format based on the value passed for parameters.

Example

In the example below, we have created the object of the Date class. After that, we have used the toLocaleString() method without any parameter to convert the new_date object to a date string.

Next, we took the same new_date object and converted it to a string according to the US-specific locale. At last, we have also passed the object for the options containing the year property as a second parameter of the toLocaleString() method.

//  Create a new date object
let new_Date: Date = new Date();
// Converting date to string
let result: string = new_Date.toLocaleString();
console.log("The date string according to current locale is: " + result);
// Convert the date object to US specific date string
result = new_Date.toLocaleString("en-US");
console.log("The date string according to US specific locale is: " + result);

On compiling, it will generate the following JavaScript code −

//  Create a new date object
var new_Date = new Date();
// Converting date to string
var result = new_Date.toLocaleString();
console.log("The date string according to current locale is: " + result);
// Convert the date object to US specific date string
result = new_Date.toLocaleString("en-US");
console.log("The date string according to US specific locale is: " + result);

Output

The above code will produce the following output −

The date string according to current locale is: 12/14/2022, 10:38:03 AM
The date string according to US specific locale is: 12/14/2022, 10:38:03 AM

In the output, users can see that when we pass the options to the toLocaleString() method, it returns the string according to the options passed.

Use the toString() or toISOString() methods

In TypeScript, the toString() method converts the variables of other data types or objects into the string format. So, we can use it to convert the date object to string format.

The toISOString() method is defined in the Date class. We can use the toISOString() method to convert the date object to ISO string format which is YYYY-MM-DDTHH:mm:ss.sssZ.

Syntax

Users can follow the syntax below to use the toString() and toISOStirng() method with the object of the Date class.

let date_String: string = new_Date().toString();
date_String = new_Date().toISOString();

In the above syntax, we used the toString() and toLocaleString() methods with the date to convert them to a string.

Example

In the example below, current_date is the instance of the date object. After that, we used the toString() and toISOString() methods to convert the date object to a string. Users can see in the output that it returns the date string according to the ISO format.

let current_date: Date = new Date();
// Use the toString() method
let date_String: string = current_date.toString();
console.log(
   "The date object after converting to string using the toString() method: " +
   date_String
);
// Use the toISOString() method
date_String = current_date.toISOString();
console.log(
   "The date object after converting to string using the toISOString() method: " +
   date_String
);

On compiling, it will generate the following JavaScript code −

var current_date = new Date();
// Use the toString() method
var date_String = current_date.toString();
console.log("The date object after converting to string using the toString() method: " +
   date_String);
// Use the toISOString() method
date_String = current_date.toISOString();
console.log("The date object after converting to string using the toISOString() method: " +
   date_String);

Output

The above code will produce the following output −

The date object after converting to string using the toString() method: Wed Dec 14 2022 10:45:11 GMT+0000 (UTC)
The date object after converting to string using the toISOString() method: 2022-12-14T10:45:11.874Z

Custom function to convert the Date object to string

The approach to creating the custom function is to get a year, month, day, hours, minutes, and seconds separately from the date object using the particular methods and create a formatted string from that. In TypeScript, we can use the + operator or string literals (${}) to format the strings.

Syntax

Users can follow the syntax below to create a custom date string.

let date_String: string =
   date_Object.getFullYear() +
   "/" +
   (date_Object.getMonth() + 1) +
   "/" +
   +date_Object.getDate() +
   " " +
   +date_Object.getHours() +
   ":" +
   +date_Object.getMinutes();

In the above syntax, we have shown how to create a custom date string by contacting the year, month, date, etc., separately to the string.

Example

In the example below, we have created the function called date_To_String, which creates and returns the custom date string, as we have shown in the above syntax.

function date_TO_String(date_Object: Date): string {
  // get the year, month, date, hours, and minutes seprately and append to the string.
  let date_String: string =
    date_Object.getFullYear() +
    "/" +
    (date_Object.getMonth() + 1) +
    "/" +
    +date_Object.getDate() +
    " " +
    +date_Object.getHours() +
    ":" +
    +date_Object.getMinutes();
  return date_String;
}

let new_date: Date = new Date();
// calling the date_TO_String function
let date_string = date_TO_String(new_date);
console.log("The date string is " + date_string);

On compiling, it will generate the following JavaScript code −

function date_TO_String(date_Object) {
   // get the year, month, date, hours, and minutes seprately and append to the string.
   var date_String = date_Object.getFullYear() +
      "/" +
      (date_Object.getMonth() + 1) +
      "/" +
      +date_Object.getDate() +
      " " +
      +date_Object.getHours() +
      ":" +
      +date_Object.getMinutes();
   return date_String;
}
var new_date = new Date();
// calling the date_TO_String function
var date_string = date_TO_String(new_date);
console.log("The date string is " + date_string);

Output

The above code will produce the following output −

The date string is 2022/12/14 10:47

This tutorial taught us three various methods to convert the Date object to the required string format. In the first two parts of the tutorial, we used different methods of the Date class that don’t allow us to format the date string with full flexibility. We can format the date string according to our requirements using the custom function we learned above.