V6 beta ion-datetime as wheel

Ionic Framework
1

Is the presentation shown in the image below possible with v6 using ion-datetime?

image
image744×1038 82.3 KB

When you look at the date & time picker demo here https://ionicframework.com/docs/next/ it shows like the above image. However, in my app it displays a full calendar.

I am using the code below which comes from the demo source docs-demo/datetime.tsx at eb7dea5ee5557e12fde5aec631eb65be90afe1c7 · ionic-team/docs-demo · GitHub

<ion-datetime value="1990-02-19" placeholder="Select Date"></ion-datetime>

In case it makes a difference, I am using ionic vue

2

Yeah from my experience, it seems like the demos have not been updated and are still in v5.

If you’re trying to use a wheel format for ion-datetime I don’t think it’s possible unless you use ion-picker and set the options to be date options (Picker | Display Buttons and Columns for ion-picker on Ionic Apps). Although this may not be a straightforward implementation.

3

Thanks @bchehraz

After spending a lot of time trying to figure this out I found this GitHub - ionic-team/datetime-migration-samples: A sample repo with examples on how to migrate datetime in Ionic 5 to datetime in Ionic 6.

So it looks like the UI has changed 100% for v6 and the new code to make something similar looks like this:

      <ion-item :button="true" id="open-datetime">
        <ion-label>Birthday</ion-label>
        
        <ion-text class="placeholder" v-if="formattedDate === undefined">Select a date</ion-text>
        <ion-text v-if="formattedDate !== undefined">{{ formattedDate }}</ion-text>
        
        <!-- See styles in global.css -->
        <ion-modal class="datetime-modal" trigger="open-datetime">
          <ion-content>
            <ion-datetime
              v-model="dateValue"
              :ionChange="formatDate()"
              :show-default-buttons="true"
            ></ion-datetime>
          </ion-content>
        </ion-modal>
      </ion-item>

Not the same, but close enough. It shows the calendar in a modal so it’s not as intrusive as having the entire calendar inline and if you play with the breakpoints in the modal you can show it as a bottom drawer.

1 Like