สอบคัดเลือกตรวจสอบหลายคน

src/modules/03_recruiting/components/Career.vue

@@ -221,7 +221,6 @@
                 :borderless="!false"
                 v-model="rangeDate"
                 :label="`${'ระยะเวลา'}`"
-                @update:modelValue="clickEditRow"
                 hide-bottom-space
               />
             </div>
@@ -396,10 +395,54 @@ watch(visibleColumns, async (count: String[], prevCount: String[]) => {
   await changeExamColumns("career", count);
 });
 
+watch(startDate, async (count: Date, prevCount: Date) => {
+  await calDate();
+});
+
+watch(endDate, async (count: Date, prevCount: Date) => {
+  await calDate();
+});
+
 onMounted(async () => {
   await fetchData();
 });
 
+const calDate = async () => {
+  let _startDate = new Date(startDate.value.toISOString().substr(0, 10));
+  let _endDate = new Date(endDate.value.toISOString().substr(0, 10));
+  if (_startDate > _endDate) {
+    const swap = _startDate;
+    _startDate = _endDate;
+    _endDate = swap;
+  }
+  const startYear = _startDate.getFullYear();
+  const february =
+    (startYear % 4 === 0 && startYear % 100 !== 0) || startYear % 400 === 0
+      ? 29
+      : 28;
+  const daysInMonth = [31, february, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
+  let yearDiff = _endDate.getFullYear() - startYear;
+  let monthDiff = _endDate.getMonth() - _startDate.getMonth();
+  if (monthDiff < 0) {
+    yearDiff--;
+    monthDiff += 12;
+  }
+  let dayDiff = _endDate.getDate() - _startDate.getDate();
+  if (dayDiff < 0) {
+    if (monthDiff > 0) {
+      monthDiff--;
+    } else {
+      yearDiff--;
+      monthDiff = 11;
+    }
+    dayDiff += daysInMonth[_startDate.getMonth()];
+  }
+  rangeDate.value = `${yearDiff > 0 ? yearDiff + " ปี " : ""}${
+    monthDiff > 0 ? monthDiff + " เดือน " : ""
+  }${dayDiff > 0 ? dayDiff + " วัน " : ""}`;
+};
+
 const fetchData = async () => {
   showLoader();
   await http
@@ -410,8 +453,8 @@ const fetchData = async () => {
       data.map((r: any) => {
         rows.value.push({
           ...r,
-          startDate: r.durationStart,
-          endDate: r.durationEnd,
+          startDate: new Date(r.durationStart),
+          endDate: new Date(r.durationEnd),
         });
       });
     })