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

Just a quick walk through of a simple application using the new Ionic Framework Beta v6 demonstrating the use of Ionic Modals, specifically the Bottom Sheet functionality with the Date-Time Component integrated. We also use capacitor to deploy the solution to see some of the differences if any when running the application on device.

Links

modal - https://beta.ionicframework.com/docs/api/modal
datetime - https://beta.ionicframework.com/docs/api/datetime

Source Code

I installed the dev tag of @ionic/vue and @ionic/vue-router

<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>