refactor(03): use share DatePicker

src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue

@@ -4,6 +4,8 @@ import { dateFormat, parseAndFormatDate } from 'src/utils/datetime';
 import { onMounted, watch } from 'vue';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import DatePicker from 'src/components/shared/DatePicker.vue';
+
 const { locale } = useI18n({ useScope: 'global' });
 
 const employmentOffice = defineModel<string>('employmentOffice');
@@ -192,70 +194,13 @@ let jobPositionFilter = selectFilterOptionRefMod(
       v-model="jobDescription"
     />
 
-    <VueDatePicker
-      :id="`${prefixId}-date-picker-start-date`"
-      :teleport="true"
-      utc
-      autoApply
+    <DatePicker
+      :id="`${prefixId}-date-picker-pay-date`"
       v-model="payDate"
-      :dark="$q.dark.isActive"
-      :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
-      :enableTimePicker="false"
-      :disabled="readonly"
-      class="col-md-3 col-12"
-    >
-      <template #year="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #year-overlay-value="{ value }">
-        {{ $i18n.locale === 'th-th' ? value + 543 : value }}
-      </template>
-      <template #trigger>
-        <q-input
-          lazy-rules="ondemand"
-          :for="`${prefixId}-input-start-date`"
-          :id="`${prefixId}-input-start-date`"
-          :label="$t('payDay')"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          placeholder="DD/MM/YYYY"
-          :mask="readonly ? '' : '##/##/####'"
-          :model-value="
-            payDate
-              ? readonly
-                ? dateFormat(payDate)
-                : dateFormat(payDate, false, false, true)
-              : undefined
-          "
-          @update:model-value="
-            (v) => {
-              if (v && v.toString().length === 10) {
-                payDate = parseAndFormatDate(v, locale);
-              }
-            }
-          "
-        >
-          <template v-slot:prepend>
-            <q-icon
-              size="xs"
-              name="mdi-calendar-blank-outline"
-              class="cursor-pointer"
-              color="primary"
-            />
-          </template>
-          <template v-slot:append>
-            <q-icon
-              v-if="payDate && !readonly"
-              name="mdi-close-circle"
-              class="cursor-pointer app-text-muted"
-              size="sm"
-              @click="payDate = undefined"
-            />
-          </template>
-        </q-input>
-      </template>
-    </VueDatePicker>
+      :label="$t('payDay')"
+      :readonly="readonly"
+      clearable
+    />
 
     <q-input
       lazy-rules="ondemand"