Moment js - 显示距离日期的天数和小时数

Question

我正在做一个需要对日期对象进行这种文本响应的项目​​。

“距离 1 天 7 小时” --- 它需要这样——而不是“31 小时后”或“1 天后” - 我也在使用 moment js - 因为我正在英语和德语之间进行语言切换 - 所以我已经利用了 moment.js 语言区域设置

moment.locale('de')

我正在使用 moment js - 目前我创建了一个假日期对象

  var futureDate = new Date()
  futureDate.setDate(futureDate.getDate() + 1)// add a day
  futureDate.setHours(7)// add 7 hours

当我尝试渲染时刻 js

moment(futureDate).endOf('day').fromNow()

它只是说“一天之内”

如何修改 moment 函数以处理 1 天 7 小时 - 并可能重新调整句子？

--- 代码 sn-p 尝试

moment.locale('de') // switch between en and de -- english and german

var futureDate = new Date()
futureDate.setDate(futureDate.getDate() + 1)// add a day
futureDate.setHours(7)// add 4 hours

// Results in hours
console.log(moment(futureDate).endOf('day').fromNow()); 

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

使用差异的代码测试 2

moment.locale('de') // switch between en and de -- english and german

var a = moment();
var b = moment(a).add(31, 'hours');

// Results in days
console.log(b.diff(a, 'days'));
console.log(b.diff(a, 'days', true)); 

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

Answer 1

您可以使用relativeTimeThreshold 和relativeTime（moment.updateLocale 的键）自定义时刻显示相对时间的方式（例如fromNow() 输出）。

在你的情况下，你可以：

• 调整阈值以获得以秒为单位的差异（请参阅：How to make moment.js show relative time in seconds?）。
• 使用moment.duration(Number, String) 创建一个持续时间对象。
• 使用moment-duration-format插件以您喜欢的格式显示持续时间值。

这是一个现场样本：

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

console.log(momEn.fromNow()); // in a day
console.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 hour
console.log(momDe.fromNow()); // in 1 Tag 7 Uhr

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

很遗憾，您必须手动更新需要支持的每个语言环境。

Answer 2

您可以使用moment-duration-format 或moment.diff 这样做：

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

// 1st solution: with moment-duration-format

console.log (moment.duration (end.diff (start)).format ('d [days] hh [hours]', { trim: false }))

// 2nd solution: diff without moment-duration-format

let hoursDuration = end.diff (start, 'hours')
console.log (Math.floor (hoursDuration / 24) + ' days ' + (hoursDuration % 24) + ' hours')

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

第一个解决方案需要额外的 moment-duration-format 模块，而第二个解决方案只使用 moment.js。另外，在需要之前不要忘记npm install moment-duration-format。

Answer 3

编辑：既然你提到你想坚持使用 Moment.js，他们有 moment#diff 可用：

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

发现自：https://stackoverflow.com/a/42187373/2803743

---

我会为此使用countdown.js。

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

console.log(timePassed);

timePassed 是一个可爱的对象；在这个例子中：

  days: 0
  end: Tue Jul 04 2017 07:17:41 GMT+0300 (EEST)
  hours: 12
  start: Mon Jul 03 2017 19:17:41 GMT+0300 (EEST)
  units: 18
  value: 43200000

然后你可以连接到你想要的字符串。

它的文档记录并不好，但该 lib 也有一个 CDN https://cdnjs.com/libraries/countdown