Jekyll: Dynamically Filter By Date

Jekyll produces static HTML… but what if we want to filter content by the current date? Say we have a list of events and want to hide past events. The following 2 options have you covered.

Static liquid filter

Use this in your template to filter posts by current date:

{% capture now %}{{'now' | date: '%s' | plus: 0 %}}{% endcapture %}
{% for post in site.posts %}
  {% capture date %}{{post.date | date: '%s' | plus: 0 %}}{% endcapture %}
  {% if date > now %}
    <!-- post content here -->
  {% endif %}
{% endfor %}

This code captures the current time (at build time) into the now variable and only shows the post if its date is larger than now (in the future). The date: '%s' filter captures the post’s date as a timestamp and plus: 0 ensures that any string values are cast to integers. (Method from Stack Overflow).

Of course this filtering still only happens whenever Jekyll is built…

Dynamic javascript filter

jQuery Date Filter is a little javascript library which filters out items by date on the client-side. So if your static site hasn’t been rebuilt in a while and is showing stale content, this library will hide it.