Ion-datetime v6 Angular

Hi,

Very new to ionic and try to follow a course which used v4.

I can get the ion-datetime to display on a button press. The original code is

            <ion-item lines="none">
              <ion-button id="open-modal">Date</ion-button>
              <ion-datetime></ion-datetime>
            </ion-item>

This produced a calendar all the time instead of when the button was pressed.

Looking at the docs I used

          <div class="grid-item">
            <h2>Datetime in Overlay</h2>
            <ion-button id="open-modal">Open Datetime Modal</ion-button>
            <ion-modal trigger="open-modal">
              <ion-content force-overscroll="false">
                <ion-datetime></ion-datetime>
              </ion-content>
            </ion-modal>
          </div>

This produced an empty modal when pressed. Reading the docs for modal and angular I added the ng-template. ie.

          <div class="grid-item">
            <h2>Datetime in Overlay</h2>
            <ion-button id="open-modal">Open Datetime Modal</ion-button>
            <ion-modal trigger="open-modal">
              <ng-template>
                <ion-content force-overscroll="false">
                  <ion-datetime></ion-datetime>
                </ion-content>
              </ng-template>
            </ion-modal>
          </div>

This worked as expected but the modal is just ugly.

Any help gratefully received

Hi & welcome!

Imho this is exactly how you programmed it to be

What is the preferred design? Only the datetime tightly wrapped in an overlay? Then maybe use popover instead? See doc with example

I think the problem is I viewed the source on the docs. Far better to use the code on the page. Popover did the trick.

Thanks

1 Like