minDate

src/modules/02_organizationalNew/components/DialogFormDateTime.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref,watch } from "vue";
+import { ref, watch, computed } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
@@ -13,14 +13,26 @@ const props = defineProps({
   close: Function,
 });
 
-const store = useOrganizational()
+const store = useOrganizational();
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { dialogConfirm, date2Thai,showLoader,hideLoader,messageError,success } = mixin;
+const {
+  dialogConfirm,
+  date2Thai,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+} = mixin;
 
+const minDate = computed(() => {
+  const date = new Date();
+  date.setDate(date.getDate() + 1);
+  return date;
+});
 const dateTimeRef = ref<Object | null>(null);
 
-const dateTime = ref<Date|null>();
+const dateTime = ref<Date | null>();
 
 /** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
 const objectRef: FormDateTimeRef = {
@@ -48,37 +60,39 @@ function validateForm() {
 /** ฟังชั่น บันทึก */
 function onSubmit() {
   dialogConfirm($q, () => {
-    
+    showLoader();
-    showLoader()
     http
-    .put(config.API.orgSetDateTime(store.draftId as string),{
+      .put(config.API.orgSetDateTime(store.draftId as string), {
-      orgPublishDate:dateTime.value,
+        orgPublishDate: dateTime.value,
-    })
+      })
-    .then((res)=>{
+      .then((res) => {
-      props.close?.()
+        props.close?.();
-      success($q, "บันทึกข้อมูลสำเร็จ");
+        success($q, "บันทึกข้อมูลสำเร็จ");
-    })
+      })
-    .catch((e)=>{
+      .catch((e) => {
-      messageError($q,e)
+        messageError($q, e);
-    })
+      })
-    .finally(()=>{
+      .finally(() => {
-      hideLoader()
+        hideLoader();
-    })
+      });
   });
 }
 
-watch(()=>props.modal,()=>{
+watch(
-  if(props.modal === true){
+  () => props.modal,
-    dateTime.value = null
+  () => {
+    if (props.modal === true) {
+      dateTime.value = null;
+    }
   }
-})
+);
 </script>
 <template>
   <template>
     <q-dialog v-model="props.modal" persistent>
       <q-card style="min-width: 10vw">
         <form @submit.prevent="validateForm">
-          <DialogHeader :tittle="`วันที่เผยแพร่`" :close="props.close" />
+          <DialogHeader :tittle="`ตั้งเวลาเผยแพร่`" :close="props.close" />
           <q-separator />
 
           <q-card-section>
@@ -92,6 +106,7 @@ watch(()=>props.modal,()=>{
                   borderless
                   :enableTimePicker="false"
                   week-start="0"
+                  :min-date="minDate"
                 >
                   <template #year="{ year }">
                     {{ year + 543 }}
@@ -109,9 +124,9 @@ watch(()=>props.modal,()=>{
                       :model-value="
                         dateTime != null ? date2Thai(dateTime) : null
                       "
-                      label="วันเวลาเผยแพร่"
+                      label="วันที่เผยแพร่"
                       :rules="[
-                        (val) => !!val || `${'กรุณาเลือกวันเวลาเผยแพร่'}`,
+                        (val) => !!val || `${'กรุณาเลือกวันที่เผยแพร่'}`,
                       ]"
                       lazy-rules
                     >