Datetime in popover with input doesn't work correctly

i’m trynig to create input with Datetime in popover.
i’he tried this example but it doesn’t work correctly. i can’t even select date, there is no button to confirm selected date, also, no date displayed in input section???
what am i doing wrong ?? any help please ?

           <!-- Datetime in popover with input -->
            <ion-item>
              <ion-input :value="date2" />
              <ion-button fill="clear" id="open-date-input-2">
                <ion-icon :icon="calendar" />
              </ion-button>
              <ion-popover trigger="open-date-input-2" :show-backdrop="false">
                <ion-datetime
                  presentation="date"
                  @ionChange="(ev: DatetimeCustomEvent) => date2 = formatDate(ev.detail.value)"
                />
              </ion-popover>
            </ion-item>

<script lang="ts">

    import { useRouter } from "vue-router";

    import {

    IonLabel,

    IonItem,

    IonContent,

    IonSelect,

    IonInput,

    IonCard,

    IonCardContent,

    IonSelectOption,

    IonPage,

    IonDatetime,

    IonPopover,

    IonCol

} from "@ionic/vue";

    import { format, parseISO } from 'date-fns';

    import { defineComponent, ref } from "vue";

    import { peopleOutline, handLeft, restaurant, film, book, female, male, chevronBack, flag, shareSocial,

     heartOutline, heart, filter, build, close, add, calendar, language, addCircle} from 'ionicons/icons';

    export default defineComponent({

    name: "UsersSearchFilterPage",

    components: {

        IonCard,

        IonCardContent,

        IonLabel,

        IonItem,

        IonContent,

        IonPage,

        IonCol,

        IonSelect,

        IonInput,

        IonPopover,

        IonDatetime,

        IonSelectOption,

    },

        setup() {

        const customFormatter = (value: number) => `${value}%`;

        const router = useRouter();

        const customDatetime = ref();

        const date1 = '';

        const date2 = '';

        const confirm = () => {

          if (customDatetime.value === undefined) return;

         

          customDatetime.value.$el.confirm();

        };

        const reset = () => {

          if (customDatetime.value === undefined) return;

         

          customDatetime.value.$el.reset();

        };

        const formatDate = (value: string) => {

          return format(parseISO(value), 'MMM dd yyyy');

        };

        return {handLeft, peopleOutline, router, restaurant, film, book, female, male, chevronBack, flag, shareSocial, heartOutline, calendar,

        add, build, heart, filter, close, language, customFormatter, customDatetime, formatDate};

    }

});

</script>

1 post - 1 participant

Read full topic