diff --git a/css/itflow_custom.css b/css/itflow_custom.css
index 2636b75e7..56cd619bc 100644
--- a/css/itflow_custom.css
+++ b/css/itflow_custom.css
@@ -508,11 +508,17 @@ a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(.page-li
     border-radius: .25rem;
 }
 .itflow-fp-range:hover,
-.itflow-fp-range:focus {
+.itflow-fp-range:focus,
+.itflow-fp-range.active {
     color: #fff;
     background-color: var(--itflow-accent, #007bff);
     border-color: var(--itflow-accent, #007bff);
 }
+/* The preset currently in effect - without this there is nothing on screen
+   telling you which range you are looking at once the calendar is open. */
+.itflow-fp-range.active {
+    font-weight: 600;
+}
 
 /* --- Toast fade ---------------------------------------------------------
    Bootstrap's .fade is a .15s transition, which next to toastr's old 1s
diff --git a/js/date_filter.js b/js/date_filter.js
index 375cc4ac7..0e2a4771d 100644
--- a/js/date_filter.js
+++ b/js/date_filter.js
@@ -129,10 +129,18 @@
         var initialEnd = parseYmd(dtt.value) || parseYmd(ALL_TIME_END);
         var initialKey = ymd(initialStart) + '|' + ymd(initialEnd);
 
+        // 1970-01-01 / 2099-12-31 are SQL sentinels for "no bound", not dates a
+        // user picked - and they are also the server's fallback, so most pages
+        // arrive in this state. Seeding the calendar with them opened it on
+        // January 1970 every time. Treat it as "nothing selected" instead: the
+        // calendar opens on the current month with no range highlighted, so the
+        // first click starts a fresh selection.
+        var allTimeActive = initialKey === ALL_TIME_START + '|' + ALL_TIME_END;
+
         flatpickr(input, {
             mode: 'range',
             dateFormat: 'Y-m-d',
-            defaultDate: [initialStart, initialEnd],
+            defaultDate: allTimeActive ? null : [initialStart, initialEnd],
             locale: { firstDayOfWeek: 1 },
             allowInput: false,
             onReady: function (selectedDates, dateStr, instance) {
@@ -144,6 +152,10 @@
                     btn.type = 'button';
                     btn.className = 'itflow-fp-range';
                     btn.textContent = r.label;
+                    if (r.canned === canned.value ||
+                        (allTimeActive && r.canned === 'alltime' && !canned.value)) {
+                        btn.classList.add('active');
+                    }
                     btn.addEventListener('click', function () {
                         // close() fires onClose synchronously - flag it first
                         // or onClose applies the stale range as a custom one
@@ -164,7 +176,11 @@
                 }
                 // Abandoned half-selection - put the box back how it was.
                 if (selectedDates.length !== 2) {
-                    instance.setDate([initialStart, initialEnd], false);
+                    if (allTimeActive) {
+                        instance.clear(false);
+                    } else {
+                        instance.setDate([initialStart, initialEnd], false);
+                    }
                     setDisplay(initialStart, initialEnd);
                     return;
                 }