ปรับการกรอกวันที่ การลา , ,ปฏิบัติราชการพิเศษ ,วันที่ไม่ได้รับเงินเดือน ,อื่นๆ

src/modules/04_registry/components/Other.vue

@@ -57,7 +57,18 @@
         <q-card-section class="q-p-sm">
           <div class="row col-12 q-col-gutter-x-xs q-col-gutter-y-xs">
             <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="inputDate"
+                :label="`${'วันที่'}`"
+                mask="##/##/####"
+                dense
+                :rules="[(val) => !!val || `${'กรุณาเลือกวันที่'}`]"
+              />
+
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="date"
@@ -193,7 +204,15 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, messageError, showLoader, hideLoader } = mixin;
+const {
+  convertDateDisplay,
+  convertDate,
+  date2Thai,
+  success,
+  messageError,
+  showLoader,
+  hideLoader,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const date = ref<Date>(new Date());
@@ -218,6 +237,26 @@ const profileId = ref<string>(
 const rows = ref<RequestItemsObject[]>([]);
 const filter = ref<string>(""); //search data table
 const visibleColumns = ref<String[]>([]);
+
+const inputDate = ref<string>("");
+const dayChecked = ref<boolean>(false);
+/** ตรวจเวลา */
+watch(
+  () => inputDate.value,
+  (value: string) => {
+    if (value.length === 10) {
+      const dateVal = convertDate(value);
+      if (dateVal.isValid) {
+        dayChecked.value = false;
+        date.value = new Date(dateVal.value);
+      } else {
+        dayChecked.value = true;
+        inputDate.value = "";
+      }
+    }
+  }
+);
+
 profileData.other.columns.length == 0
   ? (visibleColumns.value = ["date", "detail"])
   : (visibleColumns.value = profileData.other.columns);
@@ -387,6 +426,7 @@ const clickEdit = () => {
  * กดปุ่มเพิ่มด้านบน table
  */
 const clickAdd = async () => {
+  inputDate.value = "";
   editRow.value = false;
   await addData();
 };
@@ -521,6 +561,8 @@ const selectData = async (props: DataProps) => {
   date.value = props.row.date;
   detail.value = props.row.detail;
   id.value = props.row.id;
+
+  inputDate.value = convertDateDisplay(date.value);
   await checkRowPage();
 };