Filter HubDB content based on date

[uConnect]

I currently have a handful of 'events' in HubDB where each event has a specific date. I then have two buttons on my page; 'past events' and 'current events'. 

My goal is to filter the events based on their date. So that when 'past events' is clicked, it only shows events with a date < current local time and vice versa for when 'current events' is clicked. 

I have referenced the docs but haven't been able to figure this one out:
https://legacydocs.hubspot.com/docs/methods/hubdb/v2/get_table_rows
https://developers.hubspot.com/docs/cms/features/hubdb

This is my current code for the 'Events' module:

{% set table = hubdb_table_rows(2624607, query)%}

<div id="event-listing1">
<div class="list">
  {% for row in table %}
<div class="event-module">
  <div class="event-image-container">
    <div class="event-image" style="background-image: url({{ row["image"].url }})">
      <div class="course-oval-container">
        <span class="course-date">{{ row["circle_date"] }}</span>
        <hr class="divider" />
        <span class="course-time">{{ row["circle_time"] }}</span>
      </div>
    </div>
  </div>
  <div class="event-content">
    <h3 class="event-title">{{ row["name"] }}</h3>
    <h2 class="event-name">{{row["title"]}}</h2>
    <p class="event-date">
      {% icon
        name="{{ module.icon_field.name }}"
        style="{{ module.icon_field.type }}"
        unicode="{{ module.icon_field.unicode }}"
      %}
      {{row["date"]}}</p>
    <p class="event-location">
      {% icon
        name="{{ module.icon_field_1.name }}"
        style="{{ module.icon_field_1.type }}"
        unicode="{{ module.icon_field_1.unicode }}"
      %}
      {{row["location"]}}</p>
    <p class="event-price"><strong>${{row["price"]}}</strong></p>
    <p class="event-description">{{row["description"]}}</p>
    <button class="learn-more">Learn More</button>
  </div>
</div>
{% endfor %}

Here is a link to the preview page: https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

Here is a screenshot of the Table in hubDB:

I have used both "date" and "date and time" and attempted to use both, but have not found a way to use either.

I'm a junior software engineer with experience working in React. Very little hubL experience. 

[jonchim]

Hey @uConnect 

You might be able to use this HuBL above where you set the table

{% set current_dt = unixtimestamp( local_dt ) %}
{% set query = "event_date__gte="~current_dt~"&orderBy=event_date" %} 

 You may have to change event_date to the value of your date property

I followed this great tutorial when setting up something similar. 

https://www.smartbugmedia.com/blog/creating-event-listing-using-hubdb

[uConnect]

Hey @jonchim,

Thanks for the response. I may be missing something here, but I'm not sure what that code solves here -- 

I threw this in: 
{% set current_dt = unixtimestamp( local_dt ) %}
{% set query = "event_date__gte="~current_dt~"&orderBy=event_date" %}

Changed my "date" column to "event_date" -- and changed it to type 'date'. 

So if I follow correctly, I created a variable called current_dt -- which is == to current local time, and then I created a 'query' called 'event_date__gte' which orders the events by date?

So doesn't this mean that without clicking anything, the events will now simply just be ordered by date?

To give more info that I should have previously; I'm looking to have all current events listed out on the page, but when I click 'past events' it shows the previous events so that users can go back and view old content. I think this solution does a good job of just making sure only current events or future events show up.