AngularJS中使用moment.js实现天数加小时数的相对时间显示

刚好你已经在用Moment.js了，这个需求实现起来很简单，我给你两种实用思路，一种是直接在业务逻辑里计算，另一种是做成AngularJS过滤器方便模板复用：

核心逻辑：计算时间差并格式化 #

不管哪种方式，核心都是先把你的ISO日期字符串转成Moment对象，然后计算它和当前时间的差值，再提取天数和小时数拼接成需要的格式。

方式一：直接在控制器/服务中计算 #

如果只是在单个场景使用，直接写逻辑就行：

// 示例日期字符串
const targetDateStr = '2018-05-25T10:35:04.000Z';

// 转成Moment对象（若需基于UTC时间计算，替换为moment.utc(targetDateStr)）
const targetDate = moment(targetDateStr);

// 生成时间差的duration对象
const timeDiff = moment.duration(moment().diff(targetDate));

// 提取天数和小时数
const days = timeDiff.days();
const hours = timeDiff.hours();

// 处理单数复数（可选，根据需求决定是否保留）
const dayLabel = days === 1 ? 'day' : 'days';
const hourLabel = hours === 1 ? 'hour' : 'hours';

// 拼接最终结果
const relativeTime = `${days} ${dayLabel} ${hours} ${hourLabel}`;
console.log(relativeTime); // 输出类似 "3 days 12 hours"

方式二：做成AngularJS过滤器（推荐复用场景） #

如果需要在多个模板里使用，做成过滤器会更高效：

// 在你的AngularJS模块中注册过滤器
angular.module('yourAppName').filter('relativeDayHour', function() {
  return function(dateInput) {
    // 处理空值情况
    if (!dateInput) return '';
    
    // 转成Moment对象，可根据时区需求切换moment()/moment.utc()
    const targetDate = moment(dateInput);
    const timeDiff = moment.duration(moment().diff(targetDate));
    
    const days = timeDiff.days();
    const hours = timeDiff.hours();
    
    // 适配不同边界情况的显示
    if (days === 0) {
      return hours === 0 ? 'Just now' : `${hours} ${hours === 1 ? 'hour' : 'hours'}`;
    } else if (hours === 0) {
      return `${days} ${days === 1 ? 'day' : 'days'}`;
    } else {
      return `${days} ${days === 1 ? 'day' : 'days'} ${hours} ${hours === 1 ? 'hour' : 'hours'}`;
    }
  };
});

然后在模板里直接调用：

<!-- 绑定变量使用 -->
{{ yourDateVariable | relativeDayHour }}

<!-- 直接传入示例日期 -->
{{ '2018-05-25T10:35:04.000Z' | relativeDayHour }}

注意事项 #

• 时区问题：如果业务需要基于UTC时间计算差值，记得把moment(targetDateStr)改成moment.utc(targetDateStr)，避免本地时区干扰结果。
• 精细场景：如果需要处理小于1小时的情况（比如显示Less than 1 hour），可以在过滤器里添加判断逻辑覆盖这种场景。

内容的提问来源于stack exchange，提问作者Akash Gadhiya