在 Moment JS 中自定义时间解析

Question

我正在尝试使用 MomentJS 自定义时间戳的输出。使用相对时间我可以得到... mins ago、... hour ago 等。使用日历我得到Today at ... 或HH:MM 等。

但我想要的是某个时间戳的以下内容：
Just a second ago,
1 min ago,
2 min ago,
3 min ago,
...,
10 min ago,
HH:MM,
YESTERDAY,
DD/MM/YYYY.

我不明白是否可以使用这个库。

我尝试了以下方法：

  var time1 = moment.unix(1509711336).fromNow();
  var time2 = moment.unix(1509711336).calendar();
  var time3 = moment.unix(1509711336).format('HH:MM');

演示： here

更新：假设我发布了一篇文章，那么时间应该读作Just a second ago，然后最多10分钟左右应该读作1 min ago，@ 987654339@、3 min ago 等等。之后它应该读作HH:MM。然后当我们移到第二天时，它应该只给出YESTERDAY，然后在那天之后它应该打印DD/MM/YYYY。

Answer 1

像这样在矩库中定义自己的方法。

moment.fn.fromNowOrNow = function (a) {
    t = Math.abs(moment().diff(this) / 1000) 
    if (t < 60) { 
        return 'just now';
    }else if(t> 60 && t<36000){
      return this.fromNow(a);  
    }else if(t> 36000 && t<86400){
      return this.format("hh:mm")
    }
    this.fromNow(a);  

}

现在你可以像这样调用这个方法了

moment().fromNoworNow()

注意:: 你可以像上面那样添加一些条件

Answer 2

$(document).ready(function() {
  var customFn = {
    sameDay: function(now) {
      if (Math.abs(this.diff(now)/1000)<60) {
      console.log()
        return '['+this.fromNow()+']';
      } else {
        return 'HH:MM';
      }
    },
    lastDay: '[Yesterday]',
    lastWeek: '[Last] dddd',
    sameElse: 'DD/MM/YYYY'
  }
  var time1 = new moment().calendar(null, customFn);
  var time2 = moment.unix(1509711336).calendar(null, customFn);
  var time3 = moment.unix(1509580800).calendar(null, customFn);
  var time4 = moment.unix(1507593600).calendar(null, customFn);
  $('#displayTime1').text(time1);
  $('#displayTime2').text(time2);
  $('#displayTime3').text(time3);
  $('#displayTime4').text(time4);
});

.display {
  background-color: lightgray;
  width: 200px;
  height: 50px;
  padding: 10px;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="display" id="displayTime1"></div>
<div class="display" id="displayTime2"></div>
<div class="display" id="displayTime3"></div>
<div class="display" id="displayTime4"></div>

您可以根据自己的使用情况修改calendar。从@krishnar 获取差异解决方案。谢谢。