Stand with Ukraine. Fight for freedom and democracy

Back to contents

JetSmartFilters: How to Use Date Period Filter


From this tutorial, you’ll learn how to create the Date Period Filter using 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. Sounds good, doesn’t it?

Now let’s find out how to create a Date Period Filter. 

Creating the Date Period Filter

1 Step — 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

2 Step — 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 

1 Step — 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.

2 Step — 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 let’s have a look at how it works.

Date Period filter gif

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