[Waiting for user feedback] Date filter by min max year only

[Author]

Posts

[javierP-10]

Hi! I'm creating some filters for my car showroom in hidden link. My "coche" CPT has several custom fields, among them I have "fecha de matriculación" (date of registration) of the vehicle in a date field. I need to create a filter so the user can choose between a min and a max date to filter the cars listed, but I need only that they can specify the year. I tried to use de default toolset date picker but it's too complicated, I would like to use single textfilelds of selects for each year field. Which is the best approach to do this?

Is there a similar example that we can see? hidden link

hidden link

[Christopher Amirian]

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.