Helper script to programmatically set EQ Bank transaction date filters on an Angular-controlled date picker. Uses the native input value setter to bypass Angular form interception. May require multiple executions due to Angular validation timing.

eqbank-year-filter.js

/**
 * EQ Bank – Angular Date Picker Helper
 * -----------------------------------
 * Tested on:
 * https://secure.eqbank.ca/accounts/main/details
 *
 * Purpose:
 * Programmatically set date values on Angular-controlled
 * date picker inputs and submit the filter form.
 *
 * Notes:
 * - Angular overrides the native input.value setter.
 * - This helper bypasses Angular interception using the
 *   native HTMLInputElement value setter.
 * - On some occasions (page load, validation race conditions),
 *   you may need to call setYearAndView() more than once.
 */

/**
 * Safely sets a value on an Angular-controlled input.
 *
 * @param {string} selector - CSS selector for the input element
 * @param {string} value - Date string in format "dd / mm / yyyy"
 */
function setAngularInputValue(selector, value) {
  const input = document.querySelector(selector);
  if (!input) {
    console.error('Input not found:', selector);
    return;
  }

  const nativeSetter = Object.getOwnPropertyDescriptor(
    HTMLInputElement.prototype,
    'value'
  ).set;

  input.focus();
  nativeSetter.call(input, value);

  // Notify Angular of the change
  input.dispatchEvent(new Event('input', { bubbles: true }));
  input.dispatchEvent(new Event('blur', { bubbles: true }));
}

/**
 * Sets the date range to the full calendar year.
 *
 * @param {number} year - Four-digit year (e.g. 2025)
 */
function setYearRange(year) {
  if (!Number.isInteger(year) || year < 1900) {
    console.error('Invalid year:', year);
    return;
  }

  const startDate = `01 / 01 / ${year}`;
  const endDate   = `31 / 12 / ${year}`;

  setAngularInputValue('#start-date-input', startDate);
  setAngularInputValue('#end-date-input', endDate);
}

/**
 * Sets the year range and clicks the "View" button.
 *
 * ⚠️ Important:
 * Due to Angular validation timing or page state,
 * this function may need to be run more than once
 * for the dates to "stick".
 *
 * @param {number} year
 */
function setYearAndView(year) {
  setYearRange(year);
  document.querySelector('#btn-submit-dates')?.click();
}

/**
 * Example usage:
 *
 * setYearAndView(2024);
 *
 * // If dates clear or validation fails:
 * setYearAndView(2024);
 */