如果日期是今天的日期显示“今天”或“昨天”答案

【问题标题】：If date is todays date display "today", or "yesterday"如果日期是今天的日期显示“今天”或“昨天”
【发布时间】：2016-02-01 14:06:45
【问题描述】：

在我的 Shopify 博客中，我可以通过以下代码显示发布文章的日期：

{{ article.created_at | date: "%A, %-d. %B" }}

显示如下：1 月 22 日，星期五。 See date desc from Shopify here.

是否可以制作一个脚本来检查日期是否是今天，然后显示 shopify 日期脚本中的“今天”文本？还有“昨天”？

【问题讨论】：

还有 moment.js 有角度包装器或只是普通的 JavaScript。
你能添加你自己的javascript吗？ ...以及显示日期的html元素输出如何？
@LGSon 是的，我可以添加自己的 JavaScript。 <span class="date">{{ article.created_at | date: "%A, %-d. %B" }}</span>我应该添加什么？
您可以使用字符串过滤器将今天的日期值替换为日期过滤器上的“今天”字符串。

标签： javascript jquery date shopify

【解决方案1】：

这是一个，使用toLocaleDateString()：

function renderDate(date) {
  const today = new Date
  const yesterday = new Date; yesterday.setDate(today.getDate() - 1)
  if(date.toLocaleDateString() == today.toLocaleDateString()){
    return 'Today'
  }else if (date.toLocaleDateString() == yesterday.toLocaleDateString()) {
    return 'Yesterday'
  }
  return date.toLocaleDateString('en-US', {
    day : 'numeric',
    month : 'long'
  })
}
//Test:
renderDate(new Date('2016-11-11'))
"Today"
renderDate(new Date('2016-11-10'))
"Yesterday"
renderDate(new Date('2016-11-0'))
"Invalid Date"
renderDate(new Date('2016-11-5'))
"November 5"

【讨论】：

【解决方案2】：

Shopify 可能有一个内置的解决方案，但如果没有，在页面加载后运行此脚本应该可以让你做你想做的事。

但请注意，要计算的日期。也需要有年份，否则会出错。

请求后更新以不显示年份

要显示不带年份的日期，您可以这样做，您可以按照自己喜欢的方式设置可见日期的格式，因为它使用 data-date 计算值。

这样做的一个积极的副作用是，如果您需要日期，它仍然会出现在 data-date 属性中。

<span class="date" data-date='{{ article.published_at | date: "%F" }}'>{{ article.created_at | date: "%A, %-d. %B" }}</span>

更新示例

function makeYMD(d) {
  return d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
}
function getYesterday(d) {
  return new Date(d.setDate(d.getDate() - 1));
}

var span = document.querySelector('span.date');
var spandate = new Date(span.getAttribute("data-date"));
var today = new Date();
var yesterday = getYesterday(new Date());

spandate = makeYMD(spandate);
today = makeYMD(today);
yesterday = makeYMD(yesterday);


if(today == spandate) {
   span.textContent = "Today";
} else if(yesterday == spandate) {
   span.textContent = "Yesterday";
}

&lt;span class="date" data-date='2016-01-31'&gt;Monday, 31. January&lt;/span&gt;

【讨论】：

嗯，我明白了。有没有可能没有年份？
@VemundEldegard 是的，我会尽快更新我的答案并提出建议。

【解决方案3】：

您可以使用Control Flow Tags 来实现此目的。

  {%if {{article.created_at|date: "%Y %b %d"}}== {{ 'now' | date: "%Y %b %d" }} %}
       Today
    {% else %}
    Yesterday
      {% endif %}

【讨论】：

我想这可行。但是这里的代码没有。

【解决方案4】：

在这里测试https://jsfiddle.net/027jch3z/

var now = new Date;
function today( created_at_day,created_at_month,created_at_year, now ){
 return created_at_day== now.getUTCDate() &&
         created_at_month == (now.getUTCMonth()+1) &&
         created_at_year == now.getUTCFullYear();
}

// for yesterday, do some calculation here,
var yest = new Date(now);
yest = new Date(yest.setDate(d.getDate() -1));

function yesterday( created_at_day,created_at_month,created_at_year, yest )
{
  return created_at_day == yest.getUTCDate() &&
         created_at_month == (yest.getUTCMonth() +1) &&
         created_at_year == yest.getUTCFullYear();
}


//test calls
alert("Today: "+today(1,2,2016,now));
alert("Yesterday: "+yesterday(31,1,2016,yest));

【讨论】：

【解决方案5】：

使用可以做到这一点的 AngularJS 过滤器。在此处查看示例：

演示：https://www.screencast.com/t/rh609WQI6

代码：https://codepen.io/skounis/pen/PKPKGw

.filter('tyday', function($filter) {
  return function(input, pattern) {
    if (!pattern) {
                pattern = 'EEEE, MMM d';
            }
            var today = $filter('date')(new Date(), pattern);

            var yday = new Date();
            yday.setDate(yday.getDate() - 1);
            var yesterday = $filter('date')(yday, pattern);

            if (input === today) {
                return 'Today';
            }

            if (input === yesterday) {
                return 'Yesterday';
            }

            return input;
  };
});

【讨论】：