Clue Mediator

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

Steps to convert seconds to time string

  1. Import the libraries
  2. Use the script
  3. Output

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..!! ๐Ÿ™‚