diff --git a/resources/assets/js/components/base/BaseDatePicker.vue b/resources/assets/js/components/base/BaseDatePicker.vue
index 0f00e0b2..c47ab3a4 100644
--- a/resources/assets/js/components/base/BaseDatePicker.vue
+++ b/resources/assets/js/components/base/BaseDatePicker.vue
@@ -18,8 +18,6 @@
 import { mapGetters } from 'vuex'
 import SwDatePicker from '@bytefury/spacewind/src/components/SwDatePicker'
 import moment from 'moment'
-const fromMomentDate = (date, format = 'YYYY-MM-DD') =>
-  moment(new Date(date), format)
 
 export default {
   components: {
@@ -78,9 +76,11 @@ export default {
   watch: {
     value(val) {
       if (val && !this.enableTime) {
-        this.date = fromMomentDate(val, 'YYYY-MM-DD').format('YYYY-MM-DD')
+        this.date = moment(new Date(val), 'YYYY-MM-DD').format('YYYY-MM-DD')
       } else {
-        this.date = fromMomentDate(val, 'YYYY-MM-DD').format('YYYY-MM-DD H:m:s')
+        this.date = moment(new Date(val), 'YYYY-MM-DD').format(
+          'YYYY-MM-DD H:m:s'
+        )
       }
     },
     enableTime(val) {
@@ -118,11 +118,13 @@ export default {
       )
     }
     if (this.value && !this.enableTime) {
-      this.date = fromMomentDate(this.value, 'YYYY-MM-DD').format('YYYY-MM-DD')
+      this.date = moment(new Date(this.value), 'YYYY-MM-DD').format(
+        'YYYY-MM-DD'
+      )
       return true
     }
     if (this.value) {
-      this.date = fromMomentDate(this.value, 'YYYY-MM-DD').format(
+      this.date = moment(new Date(this.value), 'YYYY-MM-DD').format(
         'YYYY-MM-DD HH:mm:SS'
       )
     }
@@ -130,7 +132,6 @@ export default {
   methods: {
     onDateChange(date) {
       this.$emit('input', date)
-      this.$emit('change', date)
     },
   },
 }
diff --git a/resources/assets/js/views/estimates/Create.vue b/resources/assets/js/views/estimates/Create.vue
index e7e3e92f..c5f99f5b 100644
--- a/resources/assets/js/views/estimates/Create.vue
+++ b/resources/assets/js/views/estimates/Create.vue
@@ -77,7 +77,7 @@
               :calendar-button="true"
               calendar-button-icon="calendar"
               class="mt-2"
-              @change="$v.newEstimate.estimate_date.$touch()"
+              @input="$v.newEstimate.estimate_date.$touch()"
             />
           </sw-input-group>
 
@@ -92,7 +92,7 @@
               :calendar-button="true"
               calendar-button-icon="calendar"
               class="mt-2"
-              @change="$v.newEstimate.expiry_date.$touch()"
+              @input="$v.newEstimate.expiry_date.$touch()"
             />
           </sw-input-group>
 
diff --git a/resources/assets/js/views/expenses/Create.vue b/resources/assets/js/views/expenses/Create.vue
index 4a0c0412..dc13e901 100644
--- a/resources/assets/js/views/expenses/Create.vue
+++ b/resources/assets/js/views/expenses/Create.vue
@@ -110,7 +110,7 @@
               :calendar-button="true"
               class="mt-2"
               calendar-button-icon="calendar"
-              @change="$v.formData.expense_date.$touch()"
+              @input="$v.formData.expense_date.$touch()"
             />
           </sw-input-group>
 
diff --git a/resources/assets/js/views/invoices/Create.vue b/resources/assets/js/views/invoices/Create.vue
index df4275cd..6fc8cf44 100644
--- a/resources/assets/js/views/invoices/Create.vue
+++ b/resources/assets/js/views/invoices/Create.vue
@@ -76,7 +76,7 @@
               :calendar-button="true"
               calendar-button-icon="calendar"
               class="mt-2"
-              @change="$v.newInvoice.invoice_date.$touch()"
+              @input="$v.newInvoice.invoice_date.$touch()"
             />
           </sw-input-group>
 
@@ -91,7 +91,7 @@
               :calendar-button="true"
               calendar-button-icon="calendar"
               class="mt-2"
-              @change="$v.newInvoice.due_date.$touch()"
+              @input="$v.newInvoice.due_date.$touch()"
             />
           </sw-input-group>
 
diff --git a/resources/assets/js/views/payments/Create.vue b/resources/assets/js/views/payments/Create.vue
index 105d0f5b..a7947472 100644
--- a/resources/assets/js/views/payments/Create.vue
+++ b/resources/assets/js/views/payments/Create.vue
@@ -59,7 +59,7 @@
               :calendar-button="true"
               class="mt-1"
               calendar-button-icon="calendar"
-              @change="$v.formData.payment_date.$touch()"
+              @input="$v.formData.payment_date.$touch()"
             />
           </sw-input-group>
 
diff --git a/resources/assets/js/views/reports/ExpensesReport.vue b/resources/assets/js/views/reports/ExpensesReport.vue
index 814691f0..f371d652 100644
--- a/resources/assets/js/views/reports/ExpensesReport.vue
+++ b/resources/assets/js/views/reports/ExpensesReport.vue
@@ -29,7 +29,7 @@
             :calendar-button="true"
             calendar-button-icon="calendar"
             class="mt-2"
-            @change="$v.formData.from_date.$touch()"
+            @input="$v.formData.from_date.$touch()"
           />
         </sw-input-group>
 
@@ -44,7 +44,7 @@
             :calendar-button="true"
             calendar-button-icon="calendar"
             class="mt-2"
-            @change="$v.formData.to_date.$touch()"
+            @input="$v.formData.to_date.$touch()"
           />
         </sw-input-group>
       </div>
@@ -164,13 +164,13 @@ export default {
       }
     },
 
-    dateRangeUrl () {
+    dateRangeUrl() {
       return `${this.siteURL}?from_date=${moment(
         this.formData.from_date
       ).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
         'YYYY-MM-DD'
       )}`
-    }
+    },
   },
 
   watch: {
diff --git a/resources/assets/js/views/reports/ProfitLossReport.vue b/resources/assets/js/views/reports/ProfitLossReport.vue
index bb70e937..439285af 100644
--- a/resources/assets/js/views/reports/ProfitLossReport.vue
+++ b/resources/assets/js/views/reports/ProfitLossReport.vue
@@ -29,7 +29,7 @@
             :calendar-button="true"
             calendar-button-icon="calendar"
             class="mt-2"
-            @change="$v.formData.from_date.$touch()"
+            @input="$v.formData.from_date.$touch()"
           />
         </sw-input-group>
 
@@ -44,7 +44,7 @@
             :calendar-button="true"
             calendar-button-icon="calendar"
             class="mt-2"
-            @change="$v.formData.to_date.$touch()"
+            @input="$v.formData.to_date.$touch()"
           />
         </sw-input-group>
       </div>
@@ -163,13 +163,13 @@ export default {
       }
     },
 
-    dateRangeUrl () {
+    dateRangeUrl() {
       return `${this.siteURL}?from_date=${moment(
         this.formData.from_date
       ).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
         'YYYY-MM-DD'
       )}`
-    }
+    },
   },
 
   watch: {
diff --git a/resources/assets/js/views/reports/SalesReports.vue b/resources/assets/js/views/reports/SalesReports.vue
index 803475bc..52621d0d 100644
--- a/resources/assets/js/views/reports/SalesReports.vue
+++ b/resources/assets/js/views/reports/SalesReports.vue
@@ -28,7 +28,7 @@
             :calendar-button="true"
             calendar-button-icon="calendar"
             class="mt-2"
-            @change="$v.formData.from_date.$touch()"
+            @input="$v.formData.from_date.$touch()"
           />
         </sw-input-group>
 
@@ -43,7 +43,7 @@
             :calendar-button="true"
             calendar-button-icon="calendar"
             class="mt-2"
-            @change="$v.formData.to_date.$touch()"
+            @input="$v.formData.to_date.$touch()"
           />
         </sw-input-group>
       </div>
@@ -182,21 +182,21 @@ export default {
       }
     },
 
-    customerDateRangeUrl () {
+    customerDateRangeUrl() {
       return `${this.customerSiteURL}?from_date=${moment(
-          this.formData.from_date
-        ).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
-          'YYYY-MM-DD'
-        )}`
+        this.formData.from_date
+      ).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
+        'YYYY-MM-DD'
+      )}`
     },
 
-    itemDateRangeUrl () {
+    itemDateRangeUrl() {
       return `${this.itemsSiteURL}?from_date=${moment(
         this.formData.from_date
       ).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
         'YYYY-MM-DD'
       )}`
-    }
+    },
   },
 
   watch: {
diff --git a/resources/assets/js/views/reports/TaxReport.vue b/resources/assets/js/views/reports/TaxReport.vue
index 52305a02..adf9237c 100644
--- a/resources/assets/js/views/reports/TaxReport.vue
+++ b/resources/assets/js/views/reports/TaxReport.vue
@@ -28,7 +28,7 @@
             :calendar-button="true"
             calendar-button-icon="calendar"
             class="mt-2"
-            @change="$v.formData.from_date.$touch()"
+            @input="$v.formData.from_date.$touch()"
           />
         </sw-input-group>
 
@@ -43,7 +43,7 @@
             :calendar-button="true"
             calendar-button-icon="calendar"
             class="mt-2"
-            @change="$v.formData.to_date.$touch()"
+            @input="$v.formData.to_date.$touch()"
           />
         </sw-input-group>
       </div>
@@ -152,13 +152,13 @@ export default {
       }
     },
 
-    dateRangeUrl () {
+    dateRangeUrl() {
       return `${this.siteURL}?from_date=${moment(
         this.formData.from_date
       ).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
         'YYYY-MM-DD'
       )}`
-    }
+    },
   },
 
   watch: {