Cant get new v6 DateTime Component to popup in a new blank Angular application

Ionic Framework
#1

Hi, I Have just updated my Ionic application to V6 and am just trying to DateTime to act as a popup rather than inline (similar as before, as I have a small space to fit them in).

From this post, I am following this example in a new blank Ionicv6/Angular project.

All I have in the apps home page is the following (as per the exmaple)

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>


    <ion-content>
      <ion-list style="height: 100%">
        <ion-item>
          <ion-label>Start Time</ion-label>
          <ion-note slot="end" id="datetimeValue">{{dateTime}}</ion-note>
          <ion-popover trigger="datetimeValue" show-backdrop="true">
            <ion-datetime
              id="datetime"
              presentation="time"
              min="1989-06-04"
              max="2004-08-23"
              value="1994-12-15T13:47:20.789"
            ></ion-datetime>
          </ion-popover>
        </ion-item>
    </ion-list>
</ion-content>

And in the component code, just a date string…

public dateTime: string;
  constructor() {
    this.dateTime = new Date().toDateString();
  }

However, in this sample app, the date time just does not popup on top. I Just see

image
image1920×937 158 KB

Anyone have any ideas how to get this working?

Thanks in advance

#2

you are missing ng-template tag

         <ng-template>
            <ion-datetime id="datetime" presentation="time" min="1989-06-04" max="2004-08-23"
              value="1994-12-15T13:47:20.789"></ion-datetime>
          </ng-template>
1 Like
#3

Thankyou @ciccilleju , that was exactly the problem!

1 Like