Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to convert a date object to string with format hh:mm:ss in JavaScript?
We will learn to convert the date object to a string with the format hh:mm:ss in JavaScript. Working with dates and times is common in web development, and formatting them according to specific requirements is an essential skill.
The default date object returns a complete date string, which might contain more information than needed. Here, we will explore different approaches to extract and format just the time portion in hh:mm:ss format.
Using toTimeString() Method
The toTimeString() method returns the time portion of a Date object as a human-readable string. We can then extract the first 8 characters to get the hh:mm:ss format.
Syntax
let date = new Date(); let timeString = date.toTimeString().slice(0, 8);
Example
<html>
<head>
</head>
<body>
<h2>Converting JavaScript date to string with format hh:mm:ss</h2>
<h4>Using the <i>toTimeString()</i> method to extract time in hh:mm:ss format</h4>
<p id="output1"></p>
<script>
let output1 = document.getElementById("output1");
let myDate = new Date();
let timeOnly = myDate.toTimeString().slice(0, 8);
output1.innerHTML += "Current time: " + timeOnly + " <br/>";
// Creating a custom date and extracting time
myDate = new Date(2023, 11, 25, 14, 30, 45);
timeOnly = myDate.toTimeString().slice(0, 8);
output1.innerHTML += "Custom time: " + timeOnly + " <br/>";
</script>
</body>
</html>
Using Manual Formatting with Date Methods
This approach uses individual date methods to extract hours, minutes, and seconds, then formats them with leading zeros when necessary.
Example
<html>
<head>
</head>
<body>
<h2>Manual formatting using getHours(), getMinutes(), getSeconds()</h2>
<p id="output2"></p>
<script>
let output2 = document.getElementById("output2");
function formatTime(date) {
let hours = date.getHours().toString().padStart(2, '0');
let minutes = date.getMinutes().toString().padStart(2, '0');
let seconds = date.getSeconds().toString().padStart(2, '0');
return hours + ':' + minutes + ':' + seconds;
}
let currentDate = new Date();
output2.innerHTML += "Formatted time: " + formatTime(currentDate) + " <br/>";
let customDate = new Date(2023, 5, 15, 9, 5, 3);
output2.innerHTML += "Custom formatted time: " + formatTime(customDate) + " <br/>";
</script>
</body>
</html>
Using toLocaleTimeString() Method
The toLocaleTimeString() method provides locale-specific time formatting with options to customize the output format.
Example
<html>
<head>
</head>
<body>
<h2>Using toLocaleTimeString() for time formatting</h2>
<p id="output3"></p>
<script>
let output3 = document.getElementById("output3");
let date = new Date();
// 24-hour format
let time24 = date.toLocaleTimeString('en-GB', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
output3.innerHTML += "24-hour format: " + time24 + " <br/>";
// Custom date formatting
let customDate = new Date(2023, 8, 10, 16, 45, 30);
let customTime = customDate.toLocaleTimeString('en-GB', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
output3.innerHTML += "Custom time: " + customTime + " <br/>";
</script>
</body>
</html>
Comparison of Methods
| Method | Complexity | Locale Support | Best For |
|---|---|---|---|
toTimeString().slice(0,8) |
Low | System default | Simple time extraction |
| Manual formatting | Medium | Full control | Custom formatting needs |
toLocaleTimeString() |
Low | Extensive | Internationalization |
Conclusion
JavaScript offers multiple approaches to format dates as hh:mm:ss strings. The toTimeString().slice(0,8) method is simplest, while toLocaleTimeString() provides the most flexibility for international applications. Choose the method that best fits your specific requirements.
10K+ Views
