Dynamic Angular Form from JSON — How can I implement a Datetime in popover with input?

Ionic Framework Ionic Angular
1

Hi,

I have problems with my popover, as it only works with the first datatime it finds in the JSON and the second one fails and assigns all date types the same value, I have the following:

  <div *ngIf="field.type === 'date'">
                  <ion-label position="floating">{{ field.label }}</ion-label>
                  <ion-item button="true" id="open-date-input">
                    <ion-label>{{ field.label }}</ion-label>
                    <ion-text slot="end">{{ field.value }}</ion-text>
                    <ion-popover trigger="open-date-input" show-backdrop="false">
                      <ng-template>
                        <ion-datetime
                          #popoverDatetime
                          presentation="date"
                          [formControlName]="field.name"
                          (ionChange)="field.value = formatDate(popoverDatetime.value)"
                        ></ion-datetime>
                      </ng-template>
                    </ion-popover>
                  </ion-item>

                   <!-- I don't like this one as it takes up a lot 
                    of space and that's why I chose the popover -->
                  <!-- <ion-datetime
                    [value]="field.value"
                    [formControlName]="field.name"
                  ></ion-datetime> -->
 </div>

This is in the IONIC documentation [ion-datetime: Ionic API Input for Datetime Format Picker https://ionicframework.com/docs/api/datetime:
image

Thank you

2

Try reformulating your question. It’s kinda hard to undertand what exactly you’re trying to achieve.

First: What JSON??
Second: If the only problem using ion-datetime directly in the component is because the space it uses you can simply customize it with CSS