moment.js根据差异

时间:2018-05-27 16:59:28

标签: javascript jquery momentjs

我想遵循与内容发布网站相同的结构,其中新帖子的内容如下:

(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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

你真的非常接近 - 你需要在你的例子3天内实现基于timeSince在你想要的范围内的条件逻辑。

如果您只是用ternary(或甚至是IF-ELSE)切换if语句来检查timeSince值是否小于或等于3,那么可以达到预期的效果。以下是用于代替当前if的三元语句:

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

三元/条件语句首先需要一个条件来评估 - 在您的情况下,timeSince是否小于或等于3天前。如果条件为真,则执行第一个表达式 - 在这种情况下,使用Moment的.date格式格式化x ago选择器中的值。如果条件为false,在本示例中超过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'));
  }

答案 1 :(得分:1)

我们可以通过对代码执行两项操作来实现您想要的内容,首先将'day'传递到moment().diff()函数以获取天数差异,然后使用三元语句检查该值是否小于3与if非常相似。

我已经清理了代码abit,以显示我正在采取的5个步骤

  • 现在将时间存储在循环之外
  • 从属性
  • 获取日期
  • 获得天数差异
  • 根据日期是否少于3天格式化日期
  • 将该值附加到元素

&#13;
&#13;
function formatDate() {
  const NOW = new Date();

  $('.date').each(function() {
    const DATE = new Date($(this).data('date'));
    const DIFF = moment(NOW).diff(DATE, 'day');
    const FORMAT = DIFF < 3 ?
      moment(DATE).fromNow() :
      moment(DATE).format('MMM Do YY');
    $(this).text(FORMAT);
  });
}

formatDate()
&#13;
<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>
&#13;
&#13;
&#13;