Help Center

Date Period Filter Overview

Date Period Filter Overview

From this tutorial, you’ll learn how to create the Date Period Filter using the JetSmartFilters plugin to filter publications or products.

With the JetSmartFilters plugin, you can not only choose needed posts and products but also filter them by a certain date period. Date Period Filter allows filtering by a specific period. For example, to find posts that were created only on June 15th, or find tours that are available from June 15th to June 20th.

Creating the Date Period Filter

Name the filter

Open the JetSmartFilters section in your Dashboard and add a new filter. Give your filter a Name, Filter Label, and Active Filter Label

date period filter label

Define the filter’s settings

In the Filter Type dropdown, select the “Date Period” option. In the Filter By field, choose one of two values:

  • With Meta Date, you can filter products and posts by meaning set in the meta fields. For example, it could be a date period of a tour or event;
  • With the Post Date, you can filter posts by the creation date of the post. 
filter by drop-down select

In the Period Type dropdown, you can choose from the following options:

  • Custom range allows you to set your own date period. For example, you want to filter only posts from June 15th to June 17th;
  • Day. Filtering only by one day;
  • Week. Weekly period;
  • Month. Filtration by month;
  • Year. Gives you an opportunity to filter by year. For example, you want to check only posts that were added in 2020.
active period type drop-down select

Let’s also check other fields:

  • Datepicker Button Text;
  • Start/End Date Period Enabled;
  • Start Format;
  • Separator;
  • End Format.
other date period filter settings

Don’t forget to add the meta field key of the date field you’ll filter in the Query Variable field. 

Date Period Filter based on dates from the meta field

Let’s have a closer look at the Meta Date type. If you want to use this type and filter your data by meta fields, then you need to create a Custom Post with meta fields

You’ll need to create a meta field for dates. In the Meta Field box, write a Title, Name/ID (for us, it will be dateperiod), and in the Type section, select the “Date” option.

setting query variable for date period filter

How to Apply the Date Period Filter to Publications 

Create the Listing Grid and the filter

Firstly, you need to create a listing for your posts and then display posts on the needed page using Listing Grid widget from the JetEngine plugin. Please, check our Listing Grid creation tutorial.

In our case, we’ll choose Meta Date in the filter settings to filter posts by a specific date period. If you want to filter posts by the date creation, then you can choose the “Post Date” option.

Add the Listing Grid and the Date Period Filter to the page

Open the page where you want to display publications and add a section with two columns. Add the Date Period Filter widget to one column and the Listing Grid widget to another. Don’t forget to choose the listing you’ve created before in the Listing Grid widget.

date period filter widget in elementor

The next step is to open the Content tab in the Date Period Filter widget and select the filter you’ve created before. Then, select the needed provider. In our case, it will be JetEngine. 

applying date period filter to jetengine

Now you know how to use the Date Period Filter from the JetSmartFilters plugin. 

Was this article helpful?

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.