ทะเบียนประวัติ:แก้ปฏิทิน

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

@@ -64,7 +64,19 @@
         <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-12 col-sm-12 col-md-12">
+              <q-input
+                v-if="edit"
+                outlined
+                v-model="inputDate"
+                label="วันที่ได้รับ"
+                mask="##/##/####"
+                dense
+                :error="dayChecked"
+                error-message="กรุณากรอกวันที่ได้รับ"
+                :rules="[(val) => !!val || `${'กรุณากรอกวันที่ได้รับ'}`]"
+              />
               <datepicker
+                v-else
                 menu-class-name="modalfix"
                 :readonly="!edit"
                 v-model="date"
@@ -340,8 +352,16 @@ const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
 
 const mixin = useCounterMixin();
-const { date2Thai, success, dateToISO, messageError, showLoader, hideLoader } =
-  mixin;
+const {
+  date2Thai,
+  success,
+  dateToISO,
+  messageError,
+  showLoader,
+  hideLoader,
+  convertDate,
+  convertDateDisplay,
+} = mixin;
 const route = useRoute();
 const id = ref<string>("");
 const name = ref<string>();
@@ -588,6 +608,23 @@ const visibleColumnsHistory = ref<String[]>([
   "createdAt",
 ]);
 
+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 = "";
+      }
+    }
+  }
+);
 watch(visibleColumns, async (count: String[], prevCount: String[]) => {
   await changeProfileColumns("assessment", count);
 });
@@ -733,6 +770,7 @@ const saveData = async () => {
       .then((res) => {
         success($q, "บันทึกข้อมูลสำเร็จ");
         modal.value = false;
+        inputDate.value = "";
       })
       .catch((e) => {
         messageError($q, e);
@@ -845,6 +883,7 @@ const selectData = async (props: DataProps) => {
   pointSum.value = props.row.pointSum;
   date.value = props.row.date;
   id.value = props.row.id;
+  inputDate.value = convertDateDisplay(props.row.date);
   await checkRowPage();
 };
 
@@ -852,6 +891,7 @@ const selectData = async (props: DataProps) => {
  * กดปุ่มเพิ่มบน table
  */
 const addData = () => {
+  inputDate.value = "";
   modalEdit.value = false;
   modal.value = true;
   edit.value = true;