How to convert a date object to string with format hh:mm:ss in JavaScript?

Front End Technology Javascript Web Development

We will learn to convert the date object to a string with the format hh:mm:ss in JavaScript. It is a rear case that developers don’t use the date and time while developing the application. So, it is also important to learn to manipulate the dates.

The default date object returns the date string. Maybe it can be weird as you don’t need to show everything from it. So, users can format the date string according to their requirements. Here, we will see different approaches to format the date string.

Format the date using toISOString() method

In this approach, we will use the toISOString() method of the date class. We can create the date object of the Date class and invoke the toISOString() method by taking the date as a reference. We use this method to convert a date object to a string with format hh:mm: ss. It converts using ISO standard i.e. –

YYYY-MM-DDTHH:mm:ss.sssZ

Syntax

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

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

Example

In the example below, we have created the object of the date class and invoked the toISOString() method by taking the date object as a reference. It returns the string in the hh: mm: ss format. Also, it returns the ISO time, So users can’t compare it with the local time. Furthermore, we have created the custom date by passing it as a parameter of the Date() class and invoked the toISOString() method.


<html>
<head>
</head>
<body>
   <h2>Converting JavaScript date to string with format hh : mm : ss.</h2>
   <h4>Using the <i> toISOString()</i> method to convert the time in the hh : mm : ss format </h4>
   <p id = "output1"> </p>
   <script>
      let output1 = document.getElementById("output1");
      let myDate = new Date();
      output1.innerHTML += "current date is : " + myDate.toISOString() + " <br/> ";
      
      // creating the date object for particular date
      myDate = new Date(2002, 2, 21, 10, 23, 59);
      output1.innerHTML += "created custom date and formatted it : " + myDate.toISOString() + " <br/> ";
   </script>
</body>
</html>

Using the moment.format() Method

The Moment.JS library for the date and time in JavaScript contains various methods to manipulate the date and time. One of them is the .format() method, which is useful to format the date according to our requirements.

Syntax

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

let date = moment();
let dateStr = date.format("YY-MM-DD HH:mm:ss");

Parameters

YY-MM-DD HH:mm:ss − It represents the format of the string. Here, YY represents the year, MM represent month, and same way DD, HH, mm, ss represents the date, hour, minutes, and seconds respectively.

Example

In the example below, we have created the new date object using the moment() method. After that, we used the .format() method to format the date and time string in hh: mm: ss format. Users can observe the results in the output.


<html>
<head>
   <script  src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js"
   integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg=="
   crossorigin="anonymous" referrerpolicy="no-referrer"> </script>
</head>
<body>
   <h2> Converting JavaScript date to string with format hh : mm : ss . </h2>
   <h4> Using the <i> moment().format() </i> method to convert the time in the hh : mm : ss format </h4>
   <p id = "output1"> </p>
   <script>
      let output1 = document.getElementById("output1");
      let date = moment();
      let dateStr = date.format("YY-MM-DD HH:mm:ss");
      output1.innerHTML += "Current date is : " + dateStr + " <br/> ";
   </script>
</body>
</html>

Users have learned the two different approaches to convert the date and time into the required string format. We have to use the Moment.JS library, which is the best approach as it doesn’t take too much effort and can be done with a single line of code.

Also, users can get the year, month, date, and time separately using various methods and format the string, but users need to invoke the methods to get a single part of the date.