Version 6 beta, datetime questions

  1. Why is the datepicker always expanded, instead of showing the placeholder like in the demo?
  2. How can I make the “required” attribute work with ion-datetime just like ion-input?

Regarding #1: I’m using the beta6 and am just copying from the datetime example source code.

Instead of looking like “Appt Date [Select Date]” as shown in the demo, in my app the calendar is fully opened to month+time selector. How can I make it show just the placeholder text, initially?

    <ion-item>
      <ion-label position="floating">Appt Date</ion-label>
      <ion-datetime formControlName="apptDate" presentation="date-time" placeholder="Select Date" required></ion-datetime>
    </ion-item>

Regaring #2, if I submit my form without changing the initial date then it still seems to take. I’m not sure if this is related to the popup always being open.

Attachment of just pasting the Ionic demo into a blank page - showing the first datepicker already open.

Thanks.

The display change was done to better align Ionic’s datepicker with datepickers found on iOS and Android. You can use the new accordion component to hide the datepicker and expand it when users click on a label. This is how iOS does it in the calendar app. Also, there is no placeholder text since the calendar is shown by default.

We have added more datetime examples that show you how to parse dates and display placeholder values in your own app: ionic-framework/angular.md at 206cf40bf4768f6e6c84709e88034e9ac8a4a2cd · ionic-team/ionic-framework · GitHub

Liam, the “popover with cover element” from your updated sample gives exactly the user behavior I want. Many thanks, this resolves my question.

Incidentally, in Chrome the popup only shows a part of the calendar and I have to scroll right to reach the “time” component. Screenshot attached. This does NOT affect me a this stage, I imagine it’s something wrong I am doing, and not requesting help with it. Only mentioning in case it’s a beta bug and you want me to submit an issue.

calendar_widget_truncated

Again, this is not a request for help, just a note: if you copy the Ionic sample from the page linked in my original post, the datepickers all show closed even without the ion-popover. If I copy the same code into a blank page of my project, though, they auto-open and the ion-popover is needed.

Here is a codepen hosting the Ionic sample:

So this difference in behavior is a bit confusing.

Ah looks like you are using Ionic 5 in that demo. The phone demo frame in the sidebar has not been updated for Ionic 6 quite yet. I have a branch in GitHub that has these changes but they have not been pushed lived. We are still in the process of updating our docs so everything might not be 100% quite yet. Thanks for pointing this out!

1 Like

Got it. Thanks again. :slightly_smiling_face:

1 Like