[Gelöst] Front end filtering on date

[Author]

Artikel

[herreV]

Tell us what you are trying to do?
Hi I would like to add a filter in one of my views offering the client to filter the results between two dates.

So above my result i would like to create something like:

ONLY SHOW RESULTS BETWEEN
[Start Month v] [Start Year v] and [End Month v] [End Year v] [submit]

So select/combo boxes for the dates and years. Sorting on the publish date.

Is this possible?

[Minesh]

Hello. Thank you for contacting the Toolset support.

As I understand - you want to add frontend filter for month and year and compare the selected month and year with the publish date. If this is correct:
- There is no such feature to add month or year frontend filter.

[herreV]

Hmm, alright... .was already afraid...

Then I'll add an html form with a GET and URL_PARAMS, guess would make it work.

[Minesh]

Great - if you able to make it work, feel free to share the solution here in benefit of other users.

[herreV]

What I've done is create URL Parameters for:
Starting month
Starting Year
End Month
End Year
With a filter, after or on starting month / year and before or on end month / year.
I've added an html GET-form to the filter section of the view, with the action (url of the page) loading the same page again.
The select boxes in the form have the same name as the url parameters. This way when sumitting the form, the url parameters will be added to the url. So the page reloads with the selected/ submitted parameters.

To make sure the select boxes show the selected value, i've added some javasvript.

document.addEventListener("DOMContentLoaded", function () {
const params = new URLSearchParams(window.location.search);
const fields = ['smon', 'syr', 'emon', 'eyr', 'wpv_sort_orderby', 'wpv_sort_order'];

console.log("Select elements found on the page:");
console.log(document.querySelectorAll("select"));

fields.forEach(function(name) {
const value = params.get(name);
const select = document.getElementById(name);

if (select && value) {
console.log(`${name} → setting value: ${value}`);
Array.from(select.options).forEach(function(option) {
if (option.value === value) {
option.selected = true;
}
});
}
});
});

[Minesh]

Great and thank you for sharing the solution. You are welcome to mark resolve this ticket.