How to convert a JavaScript date object to a string?

Front End TechnologyJavascriptWeb Development

In this tutorial, we will learn to convert JavaScript date objects to a string. In JavaScript, we can invoke some methods on the string only. So, we need to convert the date to the string to use the date with such methods.

Here, we have three different approaches to converting the date object to a string.

Using the toString() Method

In this approach, we will use the toString() method of JavaScript to convert the date object to a string. The toString() method is useful to convert the variable of any data type such as number, objects, or array to string.

Syntax

Users can follow the syntax below to use the toString() method.

let date = new Date();
let datestr = date.toString();

Example

In the example below, we have created the date object using the constructor of the Date() class. We have used the toString() method to convert the date object to a string. Also, we have checked the type of converted string to clarify that object is converted to a string.

<html> <head> </head> <body> <h2>Converting date object to string in JavaScript.</h2> <h4>Convert date to string using <i>toString()</i> method.</h4> <p id = "output1"></p> <script> let output1 = document.getElementById("output1"); let date = new Date(); let datestr = date.toString(); output1.innerHTML += datestr + " <br/> "; output1.innerHTML += " Type of above date string is : " + typeof datestr; </script> </body> </html>

Using the toISOString() method

The toISOString() method is used to convert the date object into the ISO string format. It is a built-in method of the Date class of JavaScript.

Syntax

Users can follow the syntax below to use the toISOString() method.

let date = new Date();
let datestr = date.toISOString();

Example

In the example below, we have converted the date object to a string using the toISOString() method. Users can see in the output that the date format is also changed as we have converted the date object to an ISO string.

<html> <head> </head> <body> <h2>Converting date object to string in JavaScript.</h2> <h4>Convert date to string using <i>date.toISOString()</i> method.</h4> <p id = "output1"></p> <script> let output1 = document.getElementById("output1"); let date = new Date(); let datestr = date.toISOString(); output1.innerHTML += datestr + " <br/> "; output1.innerHTML += "Type of date string is : " + typeof datestr; </script> </body> </html>

Using the Moment.js format() Method

The Moment.js library includes the format() method to format the date object into the string format. In the parameter of the format() method, users can pass the required format for the date string.

Syntax

Users can follow the syntax below to use the .format() method of Moment.js.

date = moment().format('YY – MM - DD HH : mm : ss');

Parameters

All parameters of the moment.format() method is optional.

  • YY − It represents the year.

  • MM − It represents the Month.

  • DD − This parameter is for the day.

  • HH − It is for the hours.

  • mm − It is for the minutes.

  • ss − It represent the seconds.

Example

In the example below, we have used the Moment.js library of JavaScript. We have created two date objects; In the first object, we have formatted only the date string, and in the second object, we have formatted the date and time string.

<html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment-with-locales.min.js" integrity="sha512-vFABRuf5oGUaztndx4KoAEUVQnOvAIFs59y4tO0DILGWhQiFnFHiR+ZJfxLDyJlXgeut9Z07Svuvm+1Jv89w5g==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script> </head> <body> <h2>Converting date object to string in JavaScript.</h2> <h4>Convert date to string using <i>moment().format()</i> method.</h4> <p id = "output1"></p> <script> let output1 = document.getElementById("output1"); let date = moment().format('YY-MM-DD'); output1.innerHTML += "formatted date string only : " + date + "<br/>"; date = moment().format('YY-MM-DD HH : mm : ss'); output1.innerHTML += "formatted date and time strings : " + date + "<br/>"; </script> </body> </html>

Users have learned three approaches to converting the date object to a string. The modern approach is the last one, using the format() method of Moment.js. It allows users to set delimiter in the date string. However, users can also use the toDateString() method to solve the problem.

raja
Updated on 17-Aug-2022 12:31:21

Advertisements