Ion Date Calendar will not close by default when wrapped in ion-item

Issue

I am using the ion-datetime picker, but the Calendar sticks after date is selected and is open when ion-item is rendered:

Image:

Code:

<ion-item>
      <ion-label position = "floating">End Date</ion-label>
      <!--<ion-input required=true [(ngModel)]="uploadEvent.endDate" name = "endDate"></ion-input>-->
      <ion-datetime require=true displayFormat="MM/DD/YYYY" [(ngModel)]="uploadEvent.endDate" name="enddate"></ion-datetime>
    </ion-item>

How do I have the calendar closed by default, opened when ion-item is clicked, and code once date is selected?

I tried implemented following according to ionic docs (https://ionicframework.com/docs/api/datetime-button#:~:text=When%20using%20Datetime%20Button%20with,has%20not%20been%20presented%20yet.) but the calendar is not visible at all:

 <ion-item >
      <ion-datetime-button datetime="datetime"></ion-datetime-button>

<ion-modal [keepContentsMounted]="true">
  <ng-template>
    <ion-datetime id="datetime"></ion-datetime>
  </ng-template>
</ion-modal>
    
      <!--<ion-input required=true [(ngModel)]="uploadEvent.startdate" name = "startdate"></ion-input>-->
    </ion-item>

The ion items are wrapped in a form:

  <form #f = "ngForm" (ngSubmit)="onSubmit(f)">

Solution

I used a ion-list and ion-accordion and did not use ion-item:

<ion-item-divider></ion-item-divider>
      <!--<ion-input required=true [(ngModel)]="uploadEvent.startdate" name = "startdate"></ion-input>-->
    
    <!--End Date Pciker-->
    <ion-list >
      <ion-accordion-group >
        <ion-accordion #myAccordion value="start">
          <ion-item slot="header">
            <ion-label >End Date</ion-label>
            <ion-note slot="end" id="datetimeValue">{{selectedEndDate | date: 'dd/MM/yyyy'}}</ion-note>
          </ion-item>
          <ion-datetime
            id="datetime"
            displayFormat="dd/MM/yyyy"
            slot="content"
            presentation="date"
            min="01-01-1980"
            max="31-01-2100"
            
            [(ngModel)]="selectedEndDate"
            name="selectedEndDate"
           
          ></ion-datetime>
        </ion-accordion>
      </ion-accordion-group>
    </ion-list>

Answered By - dancingbush