ION DATETIME: I can only render the wheel, not the calendar grid

Ionic Framework
1

HI there, and thanks in advance.

I am having trouble getting the ion-datetime to render as a calander grid. No matter which props I pass the component, I always get the wheel picker. Am I missing something ?

   <div class="date-picker-container">
                  <div class="date-picker-range">
                    <h4 class="date-title">Start date</h4>
                    {/* ion-datetime for selecting start and end dates */}
                    <ion-datetime
                      mode="md"
                      presentation="date" // Adjusted to use date presentation
                      min={toISODateString(sixMonthsAgo)}
                      max={toISODateString(currentDate)}
                      value={toISODateString(sixMonthsAgo)} // Default start date
                      onIonChange={e => (this.startDate = e.detail.value)}
                    ></ion-datetime>
                  </div>
                  <div class="date-picker-range">
                    <h4 class="date-title">End date</h4>

                    <ion-datetime
                      mode="md"
                      // presentation="date"
                      presentation="date" // Adjusted to use date presentation
                      min={toISODateString(sixMonthsAgo)}
                      max={toISODateString(currentDate)}
                      value={toISODateString(currentDate)} // Default end date
                      onIonChange={e => (this.endDate = e.detail.value)}
                    ></ion-datetime>
                  </div>
                </div>

I am using ionic/core : 7.4.4

Developing on a macbook pro.

Thanks !

2

According to the documentation, it should just be presentation="date" like you have. Can you provide a reproduction of the issue in StackBlitz?

I would also update to the latest version of Ionic, 7.7.4. I looked through the release notes but didn’t see anything related to this being fixed/added but always good to be on the latest version :slight_smile:

3

thanks @twestrick, yes it should work …

And when i make a new isolated stencil-app, it does. I am just not sure why in my original implementation it is not acting as expected. I haven’t shared a stackblits because when i made one, it worked as expected. Are there any considerations I should be aware of for this ? Could it be reacting to a mediatype css property somewhere up the tree that forces it to think it is mobile? I have added a screen shot of how it presents when open.

Screenshot 2024-03-11 at 14.52.30
Screenshot 2024-03-11 at 14.52.301214×780 33.4 KB

and then in the isolated app as expected:

Screenshot 2024-03-11 at 14.53.07
Screenshot 2024-03-11 at 14.53.07946×1146 33.7 KB

Even though I am giving them the exact same config (all on ionic/core 7.7.4)

4

Have you tried setting prefer-wheel="false" explicitly?

5

I have, unfortunately does not do the trick

6

Then it’s something in your code. triple check everything.

1 Like
7

The screenshot you posted looks like the old datetime that was available in Ionic 5. Are you sure your application is using @ionic/core@7.4.4? You can verify this by running npm ls @ionic/core in a shell in your project.

1 Like