DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on β€’ Edited on

4

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>


Enter fullscreen mode Exit fullscreen mode

ko-fi

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs