From a92e9ffdc1a336c07225df9fc501a0169c789fd8 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Tue, 16 Jul 2024 08:12:01 +0000
Subject: [PATCH] fix: input date only (birth date for now)

---
 .../02_personnel-management/FormPerson.vue    | 28 +++++++++++++++++--
 src/utils/datetime.ts                         | 10 +++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index d61cc5db..da816363 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -3,6 +3,7 @@ import useOptionStore from 'src/stores/options';
 import {
   dateFormat,
   calculateAge,
+  parseAndFormatDate,
   disabledAfterToday,
 } from 'src/utils/datetime';
 
@@ -119,6 +120,7 @@ defineProps<{
       v-model="gender"
       :options="optionStore.globalOption.gender"
     />
+
     <VueDatePicker
       id="input-birth-date"
       for="input-birth-date"
@@ -143,16 +145,33 @@ defineProps<{
         <q-input
           id="input-birth-date"
           hide-bottom-space
+          :mask="
+            birthDate?.toString() === 'Invalid Date' ||
+            birthDate?.toString() === undefined
+              ? '##/##/####'
+              : ''
+          "
+          placeholder="DD/MM/YYYY"
           :label="$t('formDialogInputBirthDate')"
           :dense="dense"
           outlined
           :readonly="readonly"
-          :model-value="birthDate ? dateFormat(birthDate) : ''"
           :rules="[
             (val: string) =>
               !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
           ]"
+          :model-value="birthDate ? dateFormat(birthDate) : ''"
+          @update:model-value="
+            (v) => {
+              if (v && v.toString().length === 10) {
+                const date = parseAndFormatDate(v);
+                birthDate = date;
+              }
+              if (v && v.toString().length === 0) birthDate = '';
+            }
+          "
         >
+          <!-- v-model="birthDate" -->
           <template v-slot:prepend>
             <q-icon
               size="xs"
@@ -171,7 +190,12 @@ defineProps<{
       readonly
       :label="$t('formDialogInputAge')"
       class="col-3"
-      :model-value="birthDate ? calculateAge(birthDate) : ''"
+      :model-value="
+        birthDate?.toString() === 'Invalid Date' ||
+        birthDate?.toString() === undefined
+          ? ''
+          : calculateAge(birthDate)
+      "
     />
     <q-select
       v-if="employee"
diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts
index 1014988a..165e1ac2 100644
--- a/src/utils/datetime.ts
+++ b/src/utils/datetime.ts
@@ -103,3 +103,13 @@ export function disabledAfterToday(date: Date) {
   today.setHours(0, 0, 0, 0);
   return date > today;
 }
+
+export function parseAndFormatDate(value: string | number | undefined) {
+  if (!value) return;
+  if (value && value.toString().length === 10) {
+    const [year, month, day] = value.toString().split('/');
+
+    return new Date(`${day}/${month}/${year}`);
+  }
+  return;
+}