如果日期是今天的日期显示"today",或者"yesterday"
If date is todays date display "today", or "yesterday"
在我的 Shopify 博客中,我可以通过以下代码显示发布文章的日期:
{{ article.created_at | date: "%A, %-d. %B" }}
显示如下:1 月 22 日,星期五。 See date desc from Shopify here.
是否可以制作一个脚本来检查日期是否为今天,然后显示文本 "today" insted shopify 日期脚本?还有 "yesterday"?
您可以使用 Control Flow Tags 来实现。
{%if {{article.created_at|date: "%Y %b %d"}}== {{ 'now' | date: "%Y %b %d" }} %}
Today
{% else %}
Yesterday
{% endif %}
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";
}
<span class="date" data-date='2016-01-31'>Monday, 31. January</span>
在这里测试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));
这是一个,使用 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"
使用 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;
};
});
在我的 Shopify 博客中,我可以通过以下代码显示发布文章的日期:
{{ article.created_at | date: "%A, %-d. %B" }}
显示如下:1 月 22 日,星期五。 See date desc from Shopify here.
是否可以制作一个脚本来检查日期是否为今天,然后显示文本 "today" insted shopify 日期脚本?还有 "yesterday"?
您可以使用 Control Flow Tags 来实现。
{%if {{article.created_at|date: "%Y %b %d"}}== {{ 'now' | date: "%Y %b %d" }} %}
Today
{% else %}
Yesterday
{% endif %}
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";
}
<span class="date" data-date='2016-01-31'>Monday, 31. January</span>
在这里测试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));
这是一个,使用 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"
使用 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;
};
});