Close datetime popover with date selection

Ionic Framework
1

I use the datetime component with the popover from the docs:

<!-- Datetime in popover with cover element -->
<ion-item button="true" id="open-date-input">
  <ion-label>Date</ion-label>
  <ion-text slot="end">{{ dateValue }}</ion-text>
  <ion-popover trigger="open-date-input" show-backdrop="false">
    <ng-template>
      <ion-datetime
        #popoverDatetime
        presentation="date"
        (ionChange)="dateValue = formatDate(popoverDatetime.value)"
      ></ion-datetime>
    </ng-template>
  </ion-popover>
</ion-item>

Is there a way to close the popover with the date selection? The standard behavior ist: Choose date and then click somewhere else to close the popover. I want to close it automatically.

Thanks!

1 Like
2

sure you can:
just set this:

<ion-item button="true" id="open-date-input">
 <ion-label>Date</ion-label>
 <ion-text slot="end">{{ dateValue }}</ion-text>
 <ion-popover trigger="open-date-input" show-backdrop="false">
   <ng-template>
     <ion-datetime
       #popoverDatetime
       presentation="date"
       (ionChange)="dateValue = formatDate(popoverDatetime.value); popoverDatetime.confirm(true);"
     ></ion-datetime>
   </ng-template>
 </ion-popover>
</ion-item>
3 Likes
3

Thanks! It’s working :wink:

Just found another solution while trying some stuff with popovers: [dismissOnSelect]="true"

<ion-popover trigger="open-date-input" show-backdrop="false" [dismissOnSelect]="true">

1 Like
4

[dismissOnSelect]="true" and popoverDatetime.confirm(true); closes immediately when the [(ngModel)] for the <ion-datetime> already has a value. So if there is no date it’s working fine. But then it’s not possible to change the date.
Is there also a solution?

5

I’m not sure I’ve understood,
Can you explain better?

you can use something like

(ionChange)="popoverDatetime.confirm(); updateCalendarView();

updateCalendarView() {
    this.dataInizio = format(parseISO(popoverDatetime.value), 'dd MMM yyyy', { locale: it });

anyway you should use or [dismissOnSelect]=“true” or the confirm(true)

6

The problem is, that I’ve to use [(ngModel)] in the ion-datetime with [(ngModel)]="startDate", otherwise it would not show the selected date in the calendar, when opening it to change the date.
But the [(ngModel)] seems to fire the [dismissOnSelect] when opening the popover so it closes immdediately. Without the [(ngModel)] the preselected date is not showing up and the user is confused what he has chosen before.

<ion-popover trigger="startDate" show-backdrop="true" [dismissOnSelect]="true"  class="popoverDatetimeTop" side="right">
      <ng-template>
          <ion-datetime #popoverDatetime presentation="date" [(ngModel)]="startDate" 
                    mode='md' (ionChange)="startDateChanged(popoverDatetime.value);" [min]="today.startMin" [max]="today.startMax">
          </ion-datetime>
       </ng-template>
</ion-popover>
7

i’m sure you can find a workaround, you can use [value] instead of ngModel

i will show you the code asap,

i’m busy today but i’ll try to do my best to help you

1 Like
8

Thanks! I’m again amazed how quickly and helpfully you reply :mechanical_arm:
[value] works so far :wink:

1 Like
9

and, as I told you before, try to use the popover.dismiss() method instead of dismissOnSelect, doing this you will be sure that the popover won’t be close. You can put the popover.dismiss inside (ionChange)

an example could be:

<!-- DATEPICKER EXAMPLE START -->
<ion-item>
    <div id="open-date-input">
        <ion-button fill="clear">
            <ion-icon icon="calendar"></ion-icon>
        </ion-button>
        <span>{{data}}</span>
    </div>

    <ion-popover #popOverExample trigger="open-date-input" size="cover">
        <ng-template>
            <ion-datetime [value]="chosenDate" size="cover" locale="it-IT" [min]="aCertainMinDate"
                [max]="aCertainMaxDate" #datePickerExample presentation="date"
                (ionChange)="chosenDate = datePickerExample.value; datePickerExample.confirm(true); popOverExample.dismiss(); updateCalendarView()">

            </ion-datetime>
        </ng-template>
    </ion-popover>
</ion-item>
<!-- DATEPICKER EXAMPLE END  -->


chosenDate: any;
data: any;

updateCalendarView() {
this.data = format(parseISO(chosenDate), 'dd MMM yyyy', { locale: it });
}
1 Like