1

In my Shopify blog I can display the date of the posted article by the following code:

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

It displays like this: Friday, 22. January. See date desc from Shopify here.

Is it possible to make a script that checks if the date is today, then display the text "today" insted of the shopify date script? And "yesterday"?

vemund
  • 1,667
  • 4
  • 29
  • 43
  • there's also [moment.js](http://momentjs.com/) Which has angular wrappers or just plain ol' JavaScript. – ste2425 Feb 01 '16 at 14:12
  • Can you add your own javascript? ... And how does the html element output look like for the displayed date? – Asons Feb 01 '16 at 14:16
  • @LGSon Yes I can add my own JavaScript. `{{ article.created_at | date: "%A, %-d. %B" }}` What shoudl I add? – vemund Feb 01 '16 at 14:17
  • you can use string filter to replace today's date value with 'Today' string over your date filter. – Anil Feb 01 '16 at 14:23

5 Answers5

5

Here is one, using the 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"
randomor
  • 5,329
  • 4
  • 46
  • 68
1

You can use Control Flow Tags to achieve this.

  {%if {{article.created_at|date: "%Y %b %d"}}== {{ 'now' | date: "%Y %b %d" }} %}
       Today
    {% else %}
    Yesterday
      {% endif %}
Anil
  • 3,722
  • 2
  • 24
  • 49
1

There might be a built-in solution with Shopify, but if not, running this script after page load should give you a way to do what you want.

Note though, that the date to calc. need to have the year as well, or else it will go wrong.

Update after request to not show the year

To show the date without year, you could do like this instead, where you can format the visible date any way you like, as it uses the data-date value for calc.

A positive side effect with this is, that if you need the date it will still be there in the data-date attribute.

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

Updated sample

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
0

Test here 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));
UserBSS1
  • 2,091
  • 1
  • 28
  • 31
0

Use an AngularJS filter that will do that. See an example here:

Demo: https://www.screencast.com/t/rh609WQI6

Code: 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;
  };
});
skounis
  • 1
  • 1