ion-datetime not firing ionCancel when back button pressed (hardware)

Question

ion-datetime has a function ionCancel which fires when clicking cancel in the date picker.

i am using following configuration- Ionic Framework: 3.9.2 Ionic App Scripts: 3.1.0 Angular Core: 5.0.0 Angular Compiler CLI: 5.0.0 Node: 8.11.1 OS Platform: Windows 7

 <ion-datetime *ngIf="form.elementSlug ==='date'" placeholder="{{form.fieldPlaceHolder}}" type="Date" (click)="onclickDate()" (ionChange)='grabInputDate($event,form.isRequired,form.questionId,form.question)'></ion-datetime>

while selecting or picking a date if i press back button on android it does not closes the date picker but leaves the page (closes the page and navigates to previous page still having the date picker open). what i want is that it should close the ion date picker too.

rchau rchau · Accepted Answer · 2019-01-28T07:29:27

Give this a try. Place this code inside platform.ready in app.component.ts.

But first import following:

import { Platform, IonicApp } from 'ionic-angular';

then declare it in your constructor like this:

constructor(private ionicApp: IonicApp,private platform: Platform){}

Followed by below code in your constructor:

 this.platform.registerBackButtonAction(() => {
        let activePortal = this.ionicApp._loadingPortal.getActive() ||
          this.ionicApp._modalPortal.getActive() ||
          this.ionicApp._toastPortal.getActive() ||
          this.ionicApp._overlayPortal.getActive();

        if (activePortal) {
          activePortal.dismiss();
        }
      });

It is pretty understandable from code that it will dismiss any kind of modal, overlay or toasts when back button is pressed.

Happy Coding!

ion-datetime not firing ionCancel when back button pressed (hardware)

1 Answers