Back to contents

JetSmartFilters: How to Use the Date Range filter

 

This tutorial provides detailed information about using the Date Range filter of JetSmartFilters plugin to filter the publications or products.

As you remember, JetSmartFilters has various types of filters that allow choosing the one that adjusts your aims the most: to filter the posts, publication, to select the events in a certain period of time and others.

One of the most frequently used filter types is the Date Range filter which allows filtering posts by date. It can either be a meta date or a post date. Let’s take a look at how it is used.

How to create the Date Range filter

1 Step — Name the filter

To create the Date Range filter you must go to WordPress Dashboard > Smart Filters. Click the “Add New” button to start the filter creation. Give a Title to your newly created filter, enter a Filter Label, and Active Filter Label.

add new filter settings

2 Step — Define the filter’s settings

In the Filter Type dropdown menu choose the “Date Range” option. Then, in the Filter By dropdown menu, you need to select one of two values:

  • The Meta Date value allows you to filter the posts or products by the meaning set in the meta fields. It can be a date of the event, or it might be an expiring date of the sales, whichever date you want to meet your needs.
  • The Post Date value gives you an opportunity to filter only by the creation date of a certain post. It would be convenient in a few cases.
Date Range Filter settings

Date Range filter based on dates from meta field

In case you want to filter by Meta Date, you need to create Custom Post Type first. Let’s have a closer look at how to do that.

Firstly, navigate to JetEngine > Post Types and click on the “Add New” button. Here you need to create an Events Post Type and add Meta Fields to it.

In the Meta Field box write a Title, paste the Name/ID (for us it will be “date-”), and in the Type section select “Date”. After that, click on the “Add Post Type” button.

Date Range filter. Adding a Post Type with Meta Field

The next step is to copy the Name/IDdate-” from your Meta Field and paste it in the Query Variable field in the Smart Filters that you were creating.

date range filter based on meta data

How to apply the Date Range filter to the publications

1 Step — Create the Listing Grid and the filter

First of all, you have to create a posts grid that will be sorted by your filter. The best way to display posts is to create a Listing Grid using the JetEngine plugin. If you need a hint – get through our Listing Grid creation tutorial.

To apply the Date Range filter to the Listing Grid, in the Filter By dropdown menu, you can choose either the “Meta Date” value (and add meta field name to the Query Variable bar) or the “Post Date” value. In the second variant, the posts will be filtered by the date creation.

2 Step — Add the Listing Grid and the Date Range filter to the page

Open the page where you want to display your publications with Elementor editor and add a new section. We recommend you to use the section with two columns to set the listing of needed publications and the filter itself.

A section with two columns adding

Drag-and-drop the Listing Grid widget to the right column and select the created listing in the Listing drop-down menu. Do the necessary customization and then drag-and-drop the Date Range filter to the left column of the section.

Date Range Filter widget

After that, go to the Content tab and determine the filter in the Select filter field. Specify the provider in The filter for drop-down menu. It can be Elementor Pro, JetEngine Calendar, JetEngine itself, etc.

In the Apply type dropdown menu, you should specify the filter type.

  • An AJAX filter type allows filtering with the help of AJAX method, which means without reloading the page, which makes the process of filtering much faster.
  • The Page Reload filter reloads the page as many times the user applies the filter.

If you need a detailed overview of the filter’s Content settings tab you should follow the link and go through this guide.

When you are done with the settings, proceed to the Style tab, and customize the view of your filter. Click the “Publish” button, go to the Preview and check out how it all looks like together.

How to use the Date Range filter for the publications

How to apply the Date Range filter for the products

The process will be almost the same as for the posts. Let’s define what will be the difference in particular settings in the WP Dashboard for filtering the products on the WooCommerce shop page.

  1. In the Filter By dropdown menu, you should choose the “Meta Date” value. It might be not very useful to select the “Post Date” value for the products. Then, in the Query Variable field, you should set the certain meta field name which will become the source of the search.
  2. After that, you should show the created products on the Archive page. If you need a hint – here’s our Archive page template creation tutorial.
  3. In the Content settings tab, you should choose “JetWooBuilder Products Grid/List”, “WooCommerce Archive/Shortcode” or “JetEngine” options in The filter for drop-down menu. It depends on the tool that you used to create the content for filtering.
How to use the Date Range filter for the products

That’s it!
Now you can create and use the Date Range filter to filter either the publications or products with Date value in the meta fields.