Facets layouts: Date picker

The date picker facet is a pretty and easy range selector to filter any post-type that contains a date field that appears between two user selected dates. It is powered by the Flatpickr js library and is highly configurable.

A date picker facet is very useful for blog websites to allow the users to read the posts they need. If they need the oldest, most recents or posts between a random range, this facet will do.

The WPSOLR date picker facet only works with dates.

Create the View (from the “Views” add-on)

Each individual view is a WPSOLR configuration. “Views” is a powerfull add-on that allows the webmaster to use different engines and indexes with different configurations at different places in your website.

Create views from the “1. Activate extensions” tab of the WPSOLR dashboard. The view created for this guide has been named “Elastic” but can be named however you want.

To select the index used for this view, head to the “2. Define your search” tab of the WPSOLR dashboard then to the “2.1 Search”. Be sure to select the correct view (in this case “Elastic“) and select the index of your choosing (in this case “Elastic – Dev – Facets“). To create or connect to an existing index, check out our documentation for Apache Solr, ElasticSearch, Weaviate, Algolia.

Check the boxes in “Replace front-end archives” to display the facets wherever you want.

Activate the Theme add-on

Date picker are part of the  “Theme” add-on. You need to activate it, to be able to select and configure the Date picker facets.

Select the data to index and use for filtering

Be sure to select the correct index.  Select the post-types to index. This means that when filtering using the facets, only posts of the following post-types will be returned.

If you want to use other date fields to filter than default ones like “displaydate_dt“, you have to select the field and the indicate the correct (date) type.

In the “2.4 Facets” tab, select the facets you want to display. In this case, I chose “displaydate_dt” but if you have any other field of types date you can choose them. Just set them up as Date type like explained above.

Then you can save. After the page refresh, more facet options will appear for each one of the elements you selected.

Configure your date picker facet

In the same tab, for each one of the facets, select the label you want : in this case “Publish date“. This text will appear above the facet in the frontend.

Then you can select the facet layout from a drop-down list : select “Date picker – Flatpickr js library“.

You can then place the facets wherever you want. You can head to “Appearance>Widgets” in the WordPress dashboard. Simply add your “WPSOLR Facets” widget to the one of the sections (Main sidebar, Header, Footer, etc…). This step of the guide largely depends on the theme or plugins you use.

You can then check the filter out in your page. When closed it will appear like this. There is no filter active for now. All of the indexed posts have been published between 2023-11-09 and 2023-12-03.

When clicking on it, a calendar will appear. You can then select a range and all the elements that will be returned were published between the two dates.

As you can see the elements returned are different from before the filtering.

Choose a skin

Flatpickr has 9 skins to choose from  : Default, Light, Dark, Material Blue, Material Green, Material Red, Material Orange, AirBnB and Confetti.

Select which skin you want from the dropdown list. In this case I chose “Dark“.

If you go back to the blog page, you can click on the facet to see the calendar with the new skin appear.

Configure Flatpickr yourself (javascript options)

WPSOLR allows you to configure Flatpickr yourself easily by letting you pass on your own Flatpickr config options. You have to add the “wpsolr_flatpickr_date_picker_options”

variable with your own options in the “Javascript options” text field.

For example, to add time to the datepicker, write in the “Javascript options” text field :

wpsolr_flatpickr_date_picker_options = {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
}

The time now appears in the date picker facet.

Localization

Date picker works in a wide variety of languages (60+). You can select the language you want in the drop-down list in the “Script” field. In this case I chose fr (French).

Warning !

For it to work, you need to enable the language, by adding the config option in the “Javascript options” text field. For french, it will be :

wpsolr_flatpickr_date_picker_options = { 
locale : "fr",
}

For every other language, you can replace the “fr” with any other language code that appears in the drop-down list.

You can now see that the calendar displays all it’s text in french.