How to convert seconds to time string using Moment.js
๐
June 13, 2022
๐JavaScript
In this article, we will convert seconds to time string such as `10d 11h 44m 10s` or `5h 10m 49s` using Moment.js. Additionally, we need to use the moment-duration-format plugin to convert seconds to a time string.
Checkout more articles on JavaScript
- Time from now using Moment JS
- base64-image-in-javascript" title="How to download a base64 image in JavaScript">How to download a base64 image in JavaScript
- file-input-using-javascript" title="How to clear an HTML file input using JavaScript">How to clear an HTML file input using JavaScript
- Automatically refresh or reload a page using JavaScript
- Dialog boxes in JavaScript
Steps to convert seconds to time string
1. Import the libraries
Letโs import the moment-duration-format plugin along with the Moment.js library. Use the following scripts to convert the seconds to time string.
<!-- Moment.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<!-- moment-duration-format plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
If you are using the React Package">NPM Package then add the following code in the page.
import moment from "moment-timezone";
import momentDurationFormatSetup from "moment-duration-format";
momentDurationFormatSetup(moment);
2. Use the script
After importing the libraries, use the following script to get the desired output.
<script>
function getTimeStr(seconds) {
var duration = moment.duration(seconds, 'seconds');
return duration.format("d[d] h[h] m[m] s[s]");
}
console.log(getTimeStr(386090)); // Output: 4d 11h 14m 50s
console.log(getTimeStr(58372)); // Output: 16h 12m 52s
console.log(getTimeStr(4583)); // Output: 1h 16m 23s
console.log(getTimeStr(883)); // Output: 14m 43s
<h3 id="output">3. Output</h3>
<p>Let's combine the above code together and see how it works. You will see the output in the console.</p>
<div class="file">index.html</div>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to convert seconds to time string using Moment.js - Clue Mediator</title>
<!-- Moment.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<!-- moment-duration-format plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<h3>How to convert seconds to time string using Moment.js - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h3>
<p>Check console logs to get the formatted time string.</p>
<script>
function getTimeStr(seconds) {
var duration = moment.duration(seconds, 'seconds');
return duration.format("d[d] h[h] m[m] s[s]");
}
console.log(getTimeStr(386090)); // Output: 4d 11h 14m 50s
console.log(getTimeStr(58372)); // Output: 16h 12m 52s
console.log(getTimeStr(4583)); // Output: 1h 16m 23s
console.log(getTimeStr(883)); // Output: 14m 43s
</script>
</pre>
I hope you find this article helpful.
Thank you for reading. Happy Coding..!! ๐