不要只在当前年份显示年份,在moment.js

时间:2016-09-07 03:48:06

标签: javascript jquery momentjs

我有这段代码将日期转换为可读的时间格式

$('time').each(function (i, e) {

        if ($(e).attr("class") == 'mtime') {

            var now = moment();
            moment.lang('en', {
                calendar : {
                    lastDay : '[Yesterday] LT',
                    sameDay : 'LT',
                    nextDay : '[Tomorrow,] LT',
                    lastWeek : 'ddd LT',
                    nextWeek : 'ddd LT',
                    sameElse : 'MMM D[/]YY' //something to do with this?
                }

            });

            var elem = $(e).attr('datetime');
            var time = moment($(e).attr('datetime'));
            var diff = now.diff(time, 'days');

            $(e).html(time.calendar());

        }

});

返回输出:

<time class="mtime" datetime="2016-02-26 10:31:22" title="2016-02-26 10:31:22">Feb 26/16</time>

问题是我如何隐藏当年的年份。如果将去年格式化为&#34; M / D / YY&#34;。

预期产出:

- <time>Feb 26</time> <!--// current year -->
- <time>12/25/15</time> <!--// last year -->
- <time>8/1/14</time> <!--// last year -->

请告诉伙计们! TIA

3 个答案:

答案 0 :(得分:3)

从版本2.14.0我们可以将回调传递给特定时刻上下文:

sameElse: function() {
  if (this.years() === now.years()) {
    return 'MMM D'
  } else {
    return 'M/D/YY';
  }
}

&#13;
&#13;
$('time').each(function(i, e) {
  if ($(e).attr("class") == 'mtime') {
    var now = moment();
    moment.lang('en', {
      calendar: {
        lastDay: '[Yesterday] LT',
        sameDay: 'LT',
        nextDay: '[Tomorrow,] LT',
        lastWeek: 'ddd LT',
        nextWeek: 'ddd LT',
        sameElse: function() {
          if (this.years() === now.years()) {
            return 'MMM D'
          } else {
            return 'M/D/YY';
          }
        }
      }
    });
    var elem = $(e).attr('datetime');
    var time = moment($(e).attr('datetime'));
    var diff = now.diff(time, 'days');
    $(e).html(time.calendar());
  }
});
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<time class="mtime" datetime="2016-02-26 10:31:22"></time> <br />
<time class="mtime" datetime="2015-12-25 10:31:22"></time> <br />
<time class="mtime" datetime="2014-08-01 10:31:22"></time> <br />
&#13;
&#13;
&#13;

答案 1 :(得分:0)

您可以定义自己的custom calendar format,例如:&#39; thisYear&#39;

&#13;
&#13;
moment.calendarFormat = function (myMoment, now) {
    var diff = myMoment.diff(now, 'days', true);
    var nextMonth = now.clone().add(1, 'month');

    var retVal = (myMoment.year() === now.year()) ? 'thisYear' :
        diff < -6 ? 'sameElse' :
        diff < -1 ? 'lastWeek' :
        diff < 0 ? 'lastDay' :
        diff < 1 ? 'sameDay' :
        diff < 2 ? 'nextDay' :
        diff < 7 ? 'nextWeek' : 'sameElse';
        
    console.log(retVal);
    return retVal;
};

$('time').each(function (i, e) {

        if ($(e).attr("class") == 'mtime') {
            var formats = {
                    lastDay : '[Yesterday] LT',
                    sameDay : 'LT',
                    nextDay : '[Tomorrow,] LT',
                    lastWeek : 'ddd LT',
                    nextWeek : 'ddd LT',
                    thisYear : 'MMM D',
                    sameElse : 'M/D/YY'
            };

            var elem = $(e).attr('datetime');
            var time = moment(elem);

            $(e).html(time.calendar(moment(), formats));
        }
});
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<time class="mtime" datetime="2016-02-26 10:31:22"></time> <br />
<time class="mtime" datetime="2015-12-25 10:31:22"></time> <br />
<time class="mtime" datetime="2014-08-01 10:31:22"></time> <br />
&#13;
&#13;
&#13;

答案 2 :(得分:0)

看起来您的代码中包含了大部分内容。您只需将now变量与从DOM属性中获取的值进行比较即可。

P.S。在看了一下代码后,我的机会比我原先想象的要多。

 // instead is checking for the time elements with the mtime class, just select them using the jQuery class selector. It's far more efficient.
    $('.mtime').each(function(i, e) {

        var elem = $(e).attr('datetime'); // grabs the time DOM element and caches it.
        var eDateTime = elem.attr('datetime'); // could also just check against this. No real need to wrap momentJS around it.
        var now = moment(); // gets the current now datetime.
        var time = moment(eDateTime); // this grabs the datetime from the element and wraps moment around it. 

        moment.lang('en', {
          calendar: {
            lastDay: '[Yesterday] LT',
            sameDay: 'LT',
            nextDay: '[Tomorrow,] LT',
            lastWeek: 'ddd LT',
            nextWeek: 'ddd LT',
            sameElse: function() {
              if (time === now) { // compare the datetimes
                return 'MMM D'
              } else {
                return 'M/D/YY';
              }
            }
          }

            if (time !== now) { // compare the datetimes. If they do not match it renders.
                elem.html(time.calendar()); 
            }
        }
  });

希望这会有所帮助。