Ion-datetime V6 vue display issue

Ionic Framework Ionic Vue
1

Hello,

I’m trying to implement the ion-datetime component from V6 inside a modal. The issue I’m having is that sometimes the calendar displays correctly, and sometimes not. When it doesn’t you cannot see the dates and the month/year picker wont display. If I click in and out of the component sometimes it does display correctly, most of the time not.
Also, I’ve never gotten the time select to appear where it should either.

I’m fairly new to web development, vue, and ionic, so I’m not sure if its me, or if V6 is still being smoothed out? Any help or advise will be greatly appreciated.

ion-datetime

Here is the bit of code where I’m calling the calendar:

  <ion-item lines="none" @click="setDateModalOpen(true)">
              <ion-label>
                <ion-icon :icon="calendarOutline"></ion-icon>
              </ion-label>
              {{ dateTimePrint }}
            </ion-item>

            <ion-modal
              :is-open="modalIsOpen"
              :presenting-element="$parent.$refs.ionRouterOutlet"
              @didDismiss="setDateModalOpen(false)"
            >
              <ion-card>
                <ion-card-header>
                  <ion-card-subtitle>Date and Time?</ion-card-subtitle>
                </ion-card-header>
                <ion-card-content>
                  <ion-datetime
                    :max="maxDate"
                    :min="minDate"
                    required="true"
                    :value="dateSelectDefault"
                    v-model="bet.endTime"
                    showDefaultButtons="true"
                  >
                  </ion-datetime>
                </ion-card-content>
              </ion-card>
            </ion-modal>```
2

This is a known issue: bug: v6 datetime does not show if rapidly presented multiple times · Issue #24112 · ionic-team/ionic-framework · GitHub

1 Like