แก้ไขรายการโครงการ => คำนวนวัน

src/modules/15_development/components/Other.vue

@@ -13,8 +13,13 @@ import { useDevelopmentDataStore } from "@/modules/15_development/store/developm
 
 const $q = useQuasar();
 const store = useDevelopmentDataStore();
-const { showLoader, hideLoader, dialogConfirm, date2Thai, messageError } =
-  useCounterMixin();
+const {
+  showLoader,
+  hideLoader,
+  calculateDurationYmd,
+  date2Thai,
+  messageError,
+} = useCounterMixin();
 
 const provinceOp = ref<DataOption[]>([]);
 const provinceOpMain = ref<DataOption[]>([]);
@@ -63,10 +68,46 @@ function changeDateStart() {
     const endDate = new Date(store.formAddProject.dateEnd);
     if (startDate > endDate) {
       store.formAddProject.dateEnd = null;
+      store.formAddProject.totalDate = null;
+    } else {
+      daysBetweenDates(
+        store.formAddProject.dateStart,
+        store.formAddProject.dateEnd
+      );
     }
   }
 }
 
+function changeDateEnd() {
+  daysBetweenDates(
+    store.formAddProject.dateStart,
+    store.formAddProject.dateEnd
+  );
+}
+
+async function daysBetweenDates(date1: any, date2: any) {
+  const newStartDate = resetTimeToMidnight(new Date(date1));
+  const newEndDate = resetTimeToMidnight(new Date(date2));
+
+  const differenceInMilliseconds =
+    newEndDate.getTime() - newStartDate.getTime();
+
+  const differenceInDays = Math.floor(
+    differenceInMilliseconds / (1000 * 60 * 60 * 24)
+  );
+
+  store.formAddProject.totalDate = differenceInDays + 1;
+}
+
+function resetTimeToMidnight(date: Date): Date {
+  const newDate = new Date(date);
+  newDate.setHours(0);
+  newDate.setMinutes(0);
+  newDate.setSeconds(0);
+  newDate.setMilliseconds(0);
+  return newDate;
+}
+
 /**
  * Fuction Filter จังหวัด
  * @param val ค่าตัวพิมพ์ค้นหา
@@ -136,6 +177,7 @@ onMounted(() => {
         :enableTimePicker="false"
         week-start="0"
         :min-date="store.formAddProject.dateStart"
+        @update:model-value="changeDateEnd()"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{