fix(query): use native date inputs in query options (#953)

* fix(query): use native date inputs in query options

Git-Session-Id: 7ccb

* fix(query): normalize date input values

Git-Session-Id: 7ccb

* fix(query): preserve native date value format

Git-Session-Id: 7ccb

Author: TimeToBuildBob

src/components/QueryOptions.vue

@@ -5,9 +5,9 @@ div
       option(v-for="hostname in hostnameChoices")
         | {{hostname}}
   b-form-group(label="Start" label-cols=2)
-    b-form-datepicker(v-model="queryOptionsData.start")
+    input.form-control(type="date" v-model="queryOptionsData.start")
   b-form-group(label="Stop" label-cols=2)
-    b-form-datepicker(v-model="queryOptionsData.stop")
+    input.form-control(type="date" v-model="queryOptionsData.stop")
   b-form-group(label="Toggles" label-cols=2)
     b-form-checkbox(type="checkbox" v-model="queryOptionsData.filter_afk" label="Filter AFK" description="")
       label Exclude time away from computer

src/views/Graph.vue

@@ -207,7 +207,9 @@ export default {
       return { nodes, links };
     },
     extendByWeek() {
-      this.queryOptions.start = moment(this.queryOptions.start).subtract(1, 'week');
+      this.queryOptions.start = moment(this.queryOptions.start)
+        .subtract(1, 'week')
+        .format('YYYY-MM-DD');
       this.generate();
     },
   },

src/views/Report.vue

@@ -176,7 +176,9 @@ export default {
     },
 
     extendByWeek() {
-      this.queryOptions.start = moment(this.queryOptions.start).subtract(1, 'week');
+      this.queryOptions.start = moment(this.queryOptions.start)
+        .subtract(1, 'week')
+        .format('YYYY-MM-DD');
       this.generate();
     },
   },

src/views/Search.vue

@@ -64,8 +64,8 @@ export default {
       // Options
       show_options: false,
       queryOptions: {
-        start: moment().subtract(1, 'day'),
-        stop: moment().add(1, 'day'),
+        start: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+        stop: moment().add(1, 'day').format('YYYY-MM-DD'),
       },
     };
   },
@@ -97,7 +97,9 @@ export default {
       }
     },
     extendByWeek() {
-      this.queryOptions.start = moment(this.queryOptions.start).subtract(1, 'week');
+      this.queryOptions.start = moment(this.queryOptions.start)
+        .subtract(1, 'week')
+        .format('YYYY-MM-DD');
       this.search();
     },
   },

src/views/settings/CategoryBuilder.vue

@@ -150,8 +150,8 @@ export default {
       show_options: false,
       queryOptions: {
         hostname: '',
-        start: moment().subtract(1, 'day'),
-        stop: moment().add(1, 'day'),
+        start: moment().subtract(1, 'day').format('YYYY-MM-DD'),
+        stop: moment().add(1, 'day').format('YYYY-MM-DD'),
       },
 
       // TODO: Support inspecting a different category than Uncategorized (e.g. to make some category more precise)

test/unit/QueryOptions.test.js

@@ -0,0 +1,64 @@
+import moment from 'moment';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import QueryOptions from '~/components/QueryOptions.vue';
+import Search from '~/views/Search.vue';
+
+const mockEnsureLoaded = jest.fn().mockResolvedValue(undefined);
+
+jest.mock('~/stores/buckets', () => ({
+  useBucketsStore: () => ({
+    ensureLoaded: mockEnsureLoaded,
+    hosts: ['laptop'],
+  }),
+}));
+
+describe('QueryOptions', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    mockEnsureLoaded.mockClear();
+  });
+
+  test('renders date range values in native date inputs', async () => {
+    const wrapper = shallowMount(QueryOptions, {
+      propsData: {
+        queryOptions: {
+          start: '2026-08-15',
+          stop: '2026-08-16',
+        },
+      },
+      stubs: {
+        'b-form-group': { template: '<div><slot /></div>' },
+        'b-form-select': true,
+        'b-form-checkbox': true,
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+
+    const dateInputs = wrapper.findAll('input[type="date"]');
+    expect(dateInputs).toHaveLength(2);
+    expect(dateInputs.at(0).element.value).toBe('2026-08-15');
+    expect(dateInputs.at(1).element.value).toBe('2026-08-16');
+  });
+
+  test.each([Search])('initializes date ranges as YYYY-MM-DD strings', view => {
+    const data = view.data();
+
+    expect(data.queryOptions.start).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    expect(data.queryOptions.stop).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+  });
+
+  test.each([Search])('keeps extended ranges compatible with date inputs', view => {
+    const vm = {
+      queryOptions: { start: moment('2026-08-15') },
+      search: jest.fn(),
+      generate: jest.fn(),
+    };
+
+    view.methods.extendByWeek.call(vm);
+
+    expect(vm.queryOptions.start).toBe('2026-08-08');
+  });
+});