时间戳

首页 > 解决方案 > moment.js 根据差异更改格式

javascript - moment.js 根据差异更改格式

问题描述

我想遵循与内容发布网站相同的结构，其中新帖子遵循以下内容：

(seconds/minutes/hours ago), (yesterday), (days ago), (MMM Do YY).

我将如何重新排列 JS 以遵循这种格式，然后(MMM Do YY)说，3 days？

// iterates over every element with the .js-time-ago css class
$('.date').each(function() {
  var $this = $(this),
    textDate = $this.data('date'), // gets the date from the date attribute
    postedDate = moment(textDate, ['DDMMMMY', 'MMMMDDY']).format(), // formats the date in a formate that will continue to be supported by Moment JS
    today = moment().format(), // gets today's date
    timeSince = moment(today, 'YYYY-MM-DD').diff(moment(postedDate, 'YYYY-MM-DD'), 'days'); // sets up the dates to be compared so that we can get a number for if statement below
  if (timeSince >= 0) $this.text(moment(postedDate).fromNow());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<div class="date" data-date="01 April 2018"></div>
<div class="date " data-date="26 May 2018"></div>
<div class="date" data-date="27 May 2018"></div>

标签： javascriptjquerymomentjs

解决方案

你实际上真的很接近 - 你只需要在timeSince你想要的范围内实现条件逻辑，在你的例子中是 3 天。

如果您简单地使用三元（甚至是 IF-ELSE）切换if语句，检查值是否小于或等于 3，您可以获得所需的结果。这是代替您当前使用的三元语句：timeSinceif

(timeSince <= 3) ? $this.text(moment(postedDate).fromNow()) : $this.text(moment(postedDate).format('MMM Do YY'));

三元/条件语句首先需要一个条件来评估 - 在您的情况下，是否timeSince小于或等于 3 天前。如果条件为真，则执行第一个表达式——在这种情况下，.date使用 Moment 的x ago格式格式化来自选择器的值。如果条件为假，在此示例中表示超过 3 天前，则它使用 Moment 使用MMM Do YY格式来格式化文本。

在此处完成 CodePen 示例：https ://codepen.io/anon/pen/zjgbmp

有关三元如何帮助保持代码简洁的示例，以下是使用相同的解决方案IF-ELSE：

  if (timeSince <= 3) {
    $this.text(moment(postedDate).fromNow());
  }
  else {
    $this.text(moment(postedDate).format('MMM Do YY'));
  }

推荐阅读