From 5e8849e6e4e8f041384dcbe3ec871fcc275916b9 Mon Sep 17 00:00:00 2001
From: Bob <bob@superuserlabs.org>
Date: Sun, 22 Feb 2026 13:08:51 +0000
Subject: [PATCH] fix: allow single-date selection in timeline date range
 picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When selecting a date range, previously both start and end dates were
required. Now only the start date is required — if the end date is
omitted, the range defaults to that single day (start to start+1day).

Also adds min/max constraints between the date inputs to prevent
selecting an end date before the start date.

Fixes #596
---
 src/components/InputTimeInterval.vue | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
index 057dedf1..77daf8bf 100644
--- a/src/components/InputTimeInterval.vue
+++ b/src/components/InputTimeInterval.vue
@@ -46,8 +46,8 @@ div
       tr(v-if="mode == 'range'")
         th.pr-2 Range:
         td
-          input(type="date", v-model="start")
-          input(type="date", v-model="end")
+          input(type="date", v-model="start", :max="end || undefined")
+          input(type="date", v-model="end", :min="start || undefined", placeholder="(optional)")
           button(
             class="btn btn-outline-dark btn-sm",
             type="button",
@@ -115,20 +115,27 @@ export default {
   computed: {
     value: {
       get() {
-        if (this.mode == 'range' && this.start && this.end) {
-          return [moment(this.start), moment(this.end).add(1, 'day')];
+        if (this.mode == 'range' && this.start) {
+          const startDate = moment(this.start);
+          // If only start date is set, show that single day
+          const endDate = this.end
+            ? moment(this.end).add(1, 'day')
+            : startDate.clone().add(1, 'day');
+          return [startDate, endDate];
         } else {
           return [moment().subtract(this.duration, 'seconds'), moment()];
         }
       },
     },
     emptyDaterange() {
-      return !(this.start && this.end);
+      return !this.start;
     },
     invalidDaterange() {
+      if (!this.end) return false;
       return moment(this.start) > moment(this.end);
     },
     daterangeTooLong() {
+      if (!this.end) return false;
       return moment(this.start).add(this.maxDuration, 'seconds').isBefore(moment(this.end));
     },
   },