update code

src/components/artist-information/personal-information/PersonalInformation.ts

-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, Ref } from 'vue';
 import { i18n } from 'src/boot/i18n';
 import { isEmail } from '../../../boot/functions';
 import { isMobilePhone } from '../../../boot/functions';
@@ -37,7 +37,7 @@ export default defineComponent({
     UploadImage,
   },
   setup(_, context) {
-    const BirthdayDatePicker = ref(moment().format('YYYY/MM/DD'))
+    const BirthdayDatePicker = ref(moment().format('YYYY/MM/DD'));
     const selectedFile = (value: FileList) => {
       // console.log(value);
       // console.log(URL.createObjectURL(value[0]));
@@ -146,12 +146,23 @@ export default defineComponent({
       console.log('object');
       context.emit('deleteAvatar');
     };
-    const selectDatePicker =(value:string) =>{
-      context.emit('UpdateBirtday',fomatDatePicker(value))
-    }
-    const fomatDatePicker=(value:string)=>{
-      return moment(value).format('DD/MM/YYYY')
-    }
+    const selectDatePicker = (value: string) => {
+      context.emit('UpdateBirtday', fomatDatePicker(value));
+    };
+    const fomatDatePicker = (value: string) => {
+      return moment(value).format('DD/MM/YYYY');
+    };
+    const openDialog: Ref<boolean> = ref(false);
+    const onOKClick = () => {
+      // console.log(BirthdayDatePicker.value);
+      selectDatePicker(BirthdayDatePicker.value);
+      openDialog.value = false;
+    };
+    // const onOKClick = () => {};
+    const onCancelClick = () => {
+      openDialog.value = false;
+    };
+
     return {
       artistCodeRules,
       fullNameRules,
@@ -172,7 +183,10 @@ export default defineComponent({
       deleteAvatar,
       BirthdayDatePicker,
       selectDatePicker,
-      fomatDatePicker
+      fomatDatePicker,
+      openDialog,
+      onOKClick,
+      onCancelClick,
     };
   },
   emits: [
@@ -198,6 +212,6 @@ export default defineComponent({
     'addNewArtist',
     'SetAvatar',
     'deleteAvatar',
-    'UpdateBirtday'
+    'UpdateBirtday',
   ],
 });

src/components/artist-information/personal-information/index.vue

@@ -94,21 +94,29 @@
             class="q-my-sm"
             readonly
             outlined
+            @click="openDialog = true"
             dense
             hide-bottom-space
           >
             <template v-slot:default>
-              <q-menu
-                transition-show="flip-right"
-                transition-hide="flip-left"
-                auto-close
-              >
+              <q-dialog ref="dialogRef" v-model="openDialog">
+                <q-card class="q-dialog-plugin">
                   <q-date
+                    style="width: 100%"
                     v-model="BirthdayDatePicker"
                     first-day-of-week="1"
-                  @update:model-value="selectDatePicker($event)"
                   ></q-date>
-              </q-menu>
+
+                  <q-card-actions align="right">
+                    <q-btn
+                      color="primary"
+                      label="Cancel"
+                      @click="onCancelClick"
+                    />
+                    <q-btn color="primary" label="OK" @click="onOKClick" />
+                  </q-card-actions>
+                </q-card>
+              </q-dialog>
             </template>
           </q-input>
         </div>