Hi,
Welcome to Toolset support. This will need custom development. I will try to give the starting point but it will be you to expand upon and fix things.
keep two visible year controls (Desde / Hasta),
keep two hidden date controls that Toolset actually reads,
a tiny JS maps the chosen years → proper dates (YYYY-01-01 / YYYY-12-31) and triggers the search.
1) Add the real date filter (range)
Edit your cars View (for CPT coche) → Query Filter → Add a filter by custom field → choose your date field
(e.g., fecha-de-matriculacion). Set it to “between two values” and give the two URL parameter names:
From (min) URL param: matri_from
To (max) URL param: matri_to
These two params are what the View will read to filter results.
2) Insert hidden Toolset date inputs (they feed the filter)
In the Search and Pagination section (or Loop editor → Filter area), add:
<!-- Hidden Toolset date controls -->
[wpv-control field="fecha-de-matriculacion" url_param="matri_from" type="date" class="hidden-date"]
[wpv-control field="fecha-de-matriculacion" url_param="matri_to" type="date" class="hidden-date"]
Hide them with a tiny CSS rule (View’s CSS editor):
.hidden-date { display: none !important; }
3) Add the visible year-only UI
Right above your Search button, add a Fields and Text cell (or HTML in the Search area):
<label for="year_min">Desde (año)</label>
<select id="year_min" name="year_min"></select>
<label for="year_max" style="margin-left:.5rem;">Hasta (año)</label>
<select id="year_max" name="year_max"></select>
(If you prefer text boxes, use <input type="number" …> with the same names.)
4) JavaScript: generate years, sync hidden dates, trigger search
Open the View’s JS editor (Legacy Views has a dedicated “JavaScript” panel) and paste:
(function(){
// Config
var earliest = 1990; // first year in the dropdowns
var nowY = new Date().getFullYear(); // current year
// Visible selects (year-only)
var selFrom = document.querySelector('select[name="year_min"]');
var selTo = document.querySelector('select[name="year_max"]');
// Hidden Toolset date inputs (the ones tied to your URL params)
var inFrom = document.querySelector('input[name="matri_from"]');
var inTo = document.querySelector('input[name="matri_to"]');
if(!selFrom || !selTo || !inFrom || !inTo) return;
// Build year options (newest → oldest)
function fillYears(sel){
var opt = document.createElement('option');
opt.value = ''; opt.textContent = sel === selFrom ? 'Desde (año)' : 'Hasta (año)';
sel.appendChild(opt);
for(var y = nowY; y >= earliest; y--){
var o = document.createElement('option');
o.value = String(y);
o.textContent = String(y);
sel.appendChild(o);
}
}
fillYears(selFrom); fillYears(selTo);
// Read URL params if present (keeps state on reload/pagination)
var params = new URLSearchParams(window.location.search);
var ym = params.get('year_min') || '';
var yM = params.get('year_max') || '';
if(ym) selFrom.value = ym;
if(yM) selTo.value = yM;
// Helper to format YYYY-MM-DD
function fmt(y, m, d){ return y + '-' + ('0'+m).slice(-2) + '-' + ('0'+d).slice(-2); }
// Sync hidden date inputs based on selected years
function syncDates(){
var yFrom = parseInt(selFrom.value, 10);
var yTo = parseInt(selTo.value, 10);
// If user picked only one bound, respect it
inFrom.value = isFinite(yFrom) ? fmt(yFrom, 1, 1) : '';
inTo.value = isFinite(yTo) ? fmt(yTo, 12, 31) : '';
// If both picked but reversed, auto-fix
if(isFinite(yFrom) && isFinite(yTo) && yFrom > yTo){
var tmp = yFrom; yFrom = yTo; yTo = tmp;
selFrom.value = String(yFrom);
selTo.value = String(yTo);
inFrom.value = fmt(yFrom, 1, 1);
inTo.value = fmt(yTo, 12, 31);
}
// Update URL params for back/forward & bookmarking
var p = new URLSearchParams(window.location.search);
(inFrom.value ? p.set('year_min', selFrom.value) : p.delete('year_min'));
(inTo.value ? p.set('year_max', selTo.value) : p.delete('year_max'));
history.replaceState(null, '', window.location.pathname + (p.toString()?('?'+p.toString()):''));
// Trigger View update:
// If your View is "update results instantly", changing the hidden inputs is enough,
// but we explicitly dispatch change to be safe.
inFrom.dispatchEvent(new Event('change', {bubbles:true}));
inTo.dispatchEvent(new Event('change', {bubbles:true}));
}
// Initial sync (when coming from URL params)
syncDates();
// Wire events
selFrom.addEventListener('change', syncDates);
selTo.addEventListener('change', syncDates);
})();
If your View updates on submit (not instantly), remove the last two dispatchEvent lines and let the user click Search.
5) Clear caches and test
Toolset → Settings → Front-end content → Clear cache
Load the page and test:
Pick Desde: 2019 / Hasta: 2023 → results should only include cars registered within those years.
Bookmark the URL: ?year_min=2019&year_max=2023 and confirm it restores the selections.
Thanks.
