ย้าย ปฏิทิน เข้าใน ฟอร์ม

src/modules/11_discipline/components/3_InvestigateDisciplinary/Form.vue

@@ -4,7 +4,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
 import { useRoute, useRouter } from "vue-router";
-
+import CalandarDialog from "@/modules/11_discipline/components/3_InvestigateDisciplinary/CalandarDialog.vue";
 /**import type*/
 import type { QTableProps } from "quasar";
 import type {
@@ -32,6 +32,9 @@ import { useComplainstDataStore } from "@/modules/11_discipline/store/Complaints
 import { useInvestigateDisStore } from "@/modules/11_discipline/store/InvestigateDisStore";
 import { useDisciplineMainStore } from "@/modules/11_discipline/store/main";
 
+const calendarModal = ref<boolean>(false);
+const calendarModalclose = () => (calendarModal.value = !calendarModal.value);
+
 const complainstStore = useComplainstDataStore();
 const investigateDis = useInvestigateDisStore();
 const mainStore = useDisciplineMainStore();
@@ -432,6 +435,10 @@ function changeFormData() {
   isSave.value = true;
 }
 
+function calendarOpen() {
+  calendarModal.value = true;
+}
+
 /** Hook */
 onMounted(async () => {
   mainStore.rowsAdd = [];
@@ -779,7 +786,7 @@ onMounted(async () => {
                     style="border: 1px solid #d6dee1"
                   >
                     <div
-                      class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
+                      class="row col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-sm q-px-md"
                     >
                       วันที่สอบสวน
 
@@ -800,6 +807,22 @@ onMounted(async () => {
                         keep-color
                         @update:model-value="changeFormData()"
                       />
+                      <q-space style="height: 1px" />
+                      <div>
+                        <q-btn
+                          name="calendar"
+                          round
+                          size="12px"
+                          flat
+                          dense
+                          icon="mdi-calendar-month"
+                          class="self-center items-center"
+                          color="primary"
+                          @click="calendarOpen"
+                        >
+                          <q-tooltip>ปฏิทิน</q-tooltip>
+                        </q-btn>
+                      </div>
                     </div>
                     <div class="col-12"><q-separator /></div>
                     <div class="q-pa-sm">
@@ -1482,4 +1505,6 @@ onMounted(async () => {
     @update:pagination="updatePaging"
     @returnDirector="returnDirector"
   />
+
+  <CalandarDialog :modal="calendarModal" :close="calendarModalclose" />
 </template>