Given a unix timstamp in the future, how can I use Moment.js to get the hours, minutes, and seconds remaining until then?
For example:
now = 15892527128
Note that the example code you have is being time offset: remaining/1000/60/60
~=28, not 23. You need to use moment.utc
. I don't recommend doing that though, because you'll encounter other problems like dealing with days and months.
As far as "native" support, see long discussion here: https://github.com/moment/moment/issues/463
TL;DR: Discussed from 2012 until now. And, in the docs they point at the moment-duration-format plugin.
Look at this plugin if you want something close to "native" support:
https://github.com/jsmreese/moment-duration-format
Honestly after looking at the situation, if it were me I'd probably just use moment-duration-format, or just use humanize()
. Maybe roll my own similar to how duration._data is generated + Intl.NumberFormat, which is what I'm guessing moment-duration-format is basically already doing.
I'm going to list some possible methods as far as I can see:
now = 1589252712837
time = 1589356202907
remaining = time - now
// extract key(units),value from parsed ._data property of duration
// no additional dependencies but depends on internal private variable _data
console.log(
Object.entries(moment.duration(remaining,'milliseconds')._data).reverse()
.flatMap(([unit,value])=>value!==0?`${value} ${unit}`:[]).join(' ')
);
// using moment-duration-format plugin
console.log(moment.duration(remaining,'milliseconds').format('h [hours] m [minutes] s [seconds]'))
// twitter style humanize
console.log(moment.duration(remaining,'milliseconds').humanize());
// hours threshhold is Infinity; never round up to higher units than hours
console.log(moment.duration(remaining,'milliseconds').humanize({h:Infinity}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.25.3/moment.min.js"></script>
<!-- moment-duration-format plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/2.3.1/moment-duration-format.min.js"></script>