Ionic Framework VueJS - Working with Modal, Bottom Sheet Drawer and DateTime in Beta v6

 <template> <ion-page> <ion-header :translucent="true"> <ion-toolbar> <ion-title>v6 Beta Modals</ion-title> </ion-toolbar> </ion-header> <ion-content :fullscreen="true" class="ion-padding"> <!-- BUTTONS --> <ion-button id="open-modal" expand="full">Datetime Modal</ion-button> <ion-button id="open-modal2" expand="full"> Datetime Bottom Sheet</ion-button > <ion-button id="open-modal3" expand="full">Time Bottom Sheet</ion-button> <!-- result display --> <div> <IonGrid> <IonRow> <IonCol class="result"> <IonLabel>{{ theResult }}</IonLabel> </IonCol> </IonRow> <IonRow > <IonCol class="result"> <IonLabel>{{ theResult && new Date(theResult).toLocaleString() }}</IonLabel> </IonCol> </IonRow> </IonGrid> </div> <!-- MODALS --> <ion-modal style=" --background: transparent" trigger="open-modal" :initial-breakpoint="0.8" > <ion-content class="ion-padding" style=" --background: transparent"> <ion-datetime style="width: 100%;height:450px" ref="customDatetime1" @ionChange="onChange" > <ion-buttons slot="buttons"> <ion-button @click="confirm(customDatetime1)" id="confirm" >Save</ion-button > <ion-button @click="reset(customDatetime1)" id="reset" >Reset</ion-button > </ion-buttons> </ion-datetime> </ion-content> </ion-modal> <!-- date time in bottom sheet with custom buttons --> <ion-modal trigger="open-modal2" :initial-breakpoint="0.6" :breakpoints="[0, 0.6, 0.8]" > <ion-content class="ion-padding" style=" --background: transparent"> <ion-datetime style="width: 100%;height:450px" ref="customDatetime2" @ionChange="onChange" > <ion-buttons slot="buttons"> <ion-button @click="confirm(customDatetime2)" id="confirm" >Save</ion-button > <ion-button @click="reset(customDatetime2)" id="reset" >Reset</ion-button > </ion-buttons> </ion-datetime> </ion-content> </ion-modal> <!-- time in bottom sheet, default buttons --> <ion-modal trigger="open-modal3" :initial-breakpoint="0.2" :breakpoints="[0, 0.2, 0.8]" > <ion-content class="ion-padding" style=" --background: transparent"> <ion-datetime presentation="date-time" style="width: 100%;height:450px" :show-default-buttons="true" @ionChange="onChange" > </ion-datetime> </ion-content> </ion-modal> </ion-content> </ion-page> </template> <script lang="ts"> import { IonContent, IonHeader, IonModal, IonPage, IonTitle, IonToolbar, IonDatetime, IonButton, modalController, IonButtons, IonLabel, IonGrid, IonCol, IonRow } from "@ionic/vue"; import { defineComponent, ref } from "vue"; export default defineComponent({ name: "Home", components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonModal, IonDatetime, IonButton, IonButtons, IonLabel, IonGrid, IonCol, IonRow }, setup() { // refs for the modals where I am using custom buttons const customDatetime1 = ref(); const customDatetime2 = ref(); // ref for value from the controls const theResult = ref(""); /** * called when the value changes in the picker, * and the user has selected confirm... OR when * using the default buttons amd they select done */ const onChange = (e: any) => { console.log(e.detail.value); theResult.value = e.detail.value; }; /** * when using the custom buttons in the slot, * this handles selecting the confirmation */ const confirm = (refValue: any) => { if (refValue === undefined) return; refValue.$el.confirm(); modalController.dismiss(); }; /** * when using the custom buttons in the slot, * this handles selecting the reset */ const reset = (refValue: any) => { if (refValue === undefined) return; refValue.$el.reset(); theResult.value = ""; modalController.dismiss(); }; // variables made accessible in the template return { modalController, customDatetime1, customDatetime2, confirm, reset, onChange, theResult }; } }); </script> <style scoped> #confirm { --color-hover: black !important; margin: 4px; } #confirm:hover { font-weight: bold !important; margin: 3.5px; } #reset { --color-hover: black !important; margin: 4px; } #reset:hover { font-weight: bold !important; margin: 3.5px; } .result { text-align: center; margin: 12px; font-size: larger; font-weight: bold; width: 100%; } </style>