Comparing dates in liquid

Question

I'm using Liquid with Jekyll to post dates on my band's website (http://longislandsound.com.au)

What I want is to automatically hide old dates, so I don't have to go in and delete them again. I think the best way to do it would be to compare the post date to the current date and only display the post if the date is in the future, but I can't figure out how to do this.

Here is the current code:

<ul id="dates">
{% for post in site.posts reversed %}
<a href="{{post.link}}">
<li>
    <div class="date">
        <span class="day">{{post.date | date: "%d"}}</span><br />
        <span class="month">{{post.date | date: "%b"}}</span>
        <span class="week">{{post.date | date: "%a"}}</span>
    </div>
    <div class="details">
        <span class="venue">{{post.venue}}</span><br />
        <span class="town">{{post.town}}</span>
    </div>
</li>
</a>
{% endfor %}
</ul>

I've tried some if statements, but I can't figure out how to compare the post date to the current date.

Can anyone help?

Answer 1

Based on date-math-manipulation-in-liquid-template-filter and get-todays-date-in-jekyll-with-liquid-markup, you should be able to use a combination of {{'now'}} or {{site.time}} and the hard to find unix timestamp date filter | date: '%s'

{% capture nowunix %}{{'now' | date: '%s'}}{% endcapture %}
{% capture posttime %}{{post.date | date: '%s'}}{% endcapture %}
{% if posttime < nowunix %}
...show posts...

Captured numbers may act as strings, not numbers, and can be type cast back to numbers using the following hack:

{% assign nowunix = nowunix | plus: 0 %}

Answer 2

Although this code works:

{% capture nowunix %}{{'now' | date: '%s'}}{% endcapture %}
{% capture posttime %}{{post.date | date: '%s'}}{% endcapture %}
{% if posttime < nowunix %} ...show posts...

It only is executed during build. If you want your website to truly update automatically, you should let javascript do the hiding.

Start with this Liquid:

{% for item in site.events %} 
  <div future-date="{{ item.date | date: '%Y%m%d' }}">...</div> 
{% endfor %}

And add this javascript:

function getCompareDate() { 
  var d = new Date(), 
      month = '' + (d.getMonth() + 1), 
      day = '' + d.getDate(), 
      year = d.getFullYear(); 
  if (month.length < 2) month = '0' + month; 
  if (day.length < 2) day = '0' + day; 
  return [year, month, day].join(''); 
} 

$('[future-date]').each(function() { 
  if($(this).attr('future-date') < getCompareDate()) $(this).hide(); 
});

The solution was found here: http://jekyllcodex.org/without-plugin/future-dates/

---

UPDATE (2018-02-19):
CloudCannon now has scheduled builds where you can simply specify to build your project once a day. If you use CloudCannon, I recommend the answer of the user [here].