From be9a4932e55852c21d709b313048fa4be95c0eb4 Mon Sep 17 00:00:00 2001
From: Manoj Kumar <manojkr.itbhu@gmail.com>
Date: Tue, 30 Dec 2025 14:29:57 +0530
Subject: [PATCH] replace momentjs with dayjs and use watch instead of update

---
 ui/src/components/view/DateTimeFilter.vue | 43 +++++++++++------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/view/DateTimeFilter.vue b/ui/src/components/view/DateTimeFilter.vue
index aca958f58f74..efac3b43eee5 100644
--- a/ui/src/components/view/DateTimeFilter.vue
+++ b/ui/src/components/view/DateTimeFilter.vue
@@ -61,7 +61,7 @@
 
 <script>
 import { ref, reactive, toRaw } from 'vue'
-import moment from 'moment'
+import dayjs from 'dayjs'
 
 export default {
   name: 'DateTimeFilter',
@@ -84,20 +84,6 @@ export default {
       value: ''
     }
   },
-  computed: {
-    startDate () {
-      if (this.startDateProp) {
-        return moment(this.startDateProp)
-      }
-      return null
-    },
-    endDate () {
-      if (this.endDateProp) {
-        return moment(this.endDateProp)
-      }
-      return null
-    }
-  },
   data () {
     return {
       allDataIsChecked: false,
@@ -110,19 +96,27 @@ export default {
       submitButtonLabel: this.$t('label.ok')
     }
   },
-  updated () {
-    this.form.startDate = this.startDate
-    this.form.endDate = this.endDate
-  },
   created () {
     this.initForm()
   },
+  watch: {
+    startDateProp (newVal) {
+      this.form.startDate = newVal ? dayjs(newVal) : null
+    },
+    endDateProp (newVal) {
+      this.form.endDate = newVal ? dayjs(newVal) : null
+    }
+  },
   methods: {
     initForm () {
       this.formRef = ref()
+      // Use dayjs instead of moment - Ant Design Vue requires dayjs
+      const startDate = this.startDateProp ? dayjs(this.startDateProp) : null
+      const endDate = this.endDateProp ? dayjs(this.endDateProp) : null
+
       this.form = reactive({
-        startDate: this.startDate,
-        endDate: this.endDate
+        startDate: startDate,
+        endDate: endDate
       })
     },
     handleSubmit (e) {
@@ -130,7 +124,12 @@ export default {
       this.formRef.value.validate().then(() => {
         this.submitButtonLabel = this.$t('label.refresh')
         const values = toRaw(this.form)
-        this.$emit('onSubmit', values)
+        // Convert dayjs objects back to JavaScript Date objects
+        const result = {
+          startDate: values.startDate ? values.startDate.toDate() : null,
+          endDate: values.endDate ? values.endDate.toDate() : null
+        }
+        this.$emit('onSubmit', result)
       }).catch(error => {
         this.formRef.value.scrollToField(error.errorFields[0].name)
       })