Moment Js - Displaying Days And Hours Away From A Date

I am working on a project that requires this kind of text response on a date object. '1 day 7 hours away' --- it needs to be this way - not '31 hours away' or '1 day away' -- also

Solution 1:

You can use relativeTimeThreshold and relativeTime (key of moment.updateLocale) to customize how moment shows relative time (e.g. the fromNow() output).

In your case, you can:

• Adjust threshold to get difference in seconds (see: How to make moment.js show relative time in seconds?).
• Create a duration object using moment.duration(Number, String).
• Use moment-duration-format plug-in to show duration value in the format you prefer.

Here a live sample:

var momEn = moment().add({d:1, h:7});
var momDe = moment().locale('de').add({d:1, h:7});

console.log(momEn.fromNow()); // in a dayconsole.log(momDe.fromNow()); // in einem Tag// Change relativeTimeThreshold
moment.relativeTimeThreshold('s', 60*60*24*30*12);

// Update relative time
moment.updateLocale('en', {
  relativeTime : {
    s: function (number, withoutSuffix, key, isFuture){
      return moment.duration(number, 's').format('d [day] h [hour]');
    },
  }
});

moment.updateLocale('de', {
  relativeTime : {
    s: function (number, withoutSuffix, key, isFuture){
      return moment.duration(number, 's').format('d [Tag] h [Uhr]');
    },
  }
});

console.log(momEn.fromNow()); // in 1 day 7 hourconsole.log(momDe.fromNow()); // in 1 Tag 7 Uhr

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

Unfortunately you have to manually update each locale you need to support.

Solution 2:

You can do it with moment-duration-format or with moment.diff like so:

let futureDate = newDate ()
futureDate.setDate (futureDate.getDate () + 1)// add a day
futureDate.setHours (7)
let start = moment ()
let end = moment (futureDate)

// 1st solution: with moment-duration-formatconsole.log (moment.duration (end.diff (start)).format ('d [days] hh [hours]', { trim: false }))

// 2nd solution: diff without moment-duration-formatlet hoursDuration = end.diff (start, 'hours')
console.log (Math.floor (hoursDuration / 24) + ' days ' + (hoursDuration % 24) + ' hours')

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/1.3.0/moment-duration-format.min.js"></script>

The first solution requires the additional moment-duration-format module, whereas the second does everything using moment.js only. Also, don't forget to npm install moment-duration-format before requiring it.

Solution 3:

Edit: Since you mentioned you'd like to stick with Moment.js, they have moment#diff available:

var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b, 'days') // 1

Found from: https://stackoverflow.com/a/42187373/2803743

---

I'd use countdown.js for this.

var futureDate = newDate()
futureDate.setDate(futureDate.getDate() + 1)// add a day
futureDate.setHours(7)// add 7 hoursvar timePassed = countdown(Date.now().toString(), futureDate, countdown.DAYS|countdown.HOURS);

console.log(timePassed);

timePassed is a lovely object; in this example:

days:0end:TueJul042017 07:17:41 GMT+0300(EEST)hours:12start:MonJul032017 19:17:41 GMT+0300(EEST)units:18value:43200000

Which you can then concat to your desired string.

It's not really documented well, but the lib also has a CDN https://cdnjs.com/libraries/countdown