单击 ionic 4 中的硬件后退按钮关闭 ionic-datepicker

Question

I am using ionic-datepicker in the app(ionic v-4), Below is the template code:

<ion-datetime  formControlName="meeting_date" display-format="MMM DD, YYYY"></ion-datetime>

The datepicker (i,e ion-datetime) will close after clicking cancel/done button or on clicking outside. But it not closing on clicking hardware back button .

In the page where i am used datepicker, I tried like this:

ionViewWillLeave(){
        let backDrop: any = document.getElementsByTagName('ion-picker-cmp');
        if(backDrop.length > 0){
            for(let i = 0; i< backDrop.length; i++){
                backDrop[i].style.display = 'none';
            }
        }
      }

But it didn't worked for me, I followed this solution

Answer 1

First you should know whether it's focused or not, so:

<ion-datetime #dateTime (ionFocus)="onDateFocused()" formControlName="meeting_date" display-format="MMM DD, YYYY"></ion-datetime>

And in component:

onDateFocused() {
  this.focused = true; // make it false in on blur
}

Then register to hardware back button:

this.platform.backButton.subscribe(() => {
  // this does work
});

Note: There is no close api method for ion-datetime as well as open . So there are some tricks mentioned here :

@ViewChild("dateTime", {static: false}) dateTime : DateTime;

ngOnInit() {
  this.platform.backButton.subscribe(() => {
    this.dateTime._picker.dismiss();
  })
}

Answer 2

Answer

This is already handled by default as part of the Ionic 4 code.

What you need to do to get this functionality though is to set backdropDismiss to true.

Theory

Ionic registers a custom event ionBackButton for handling the hardware back button press:

• https://github.com/ionic-team/ionic/blob/master/core/src/utils/hardware-back-button.ts#L20

And the overlay code that manages all overlays in Ionic registers an event handler for this ionBackButton event, which dismisses the topmost overlay:

• https://github.com/ionic-team/ionic/blob/master/core/src/utils/overlays.ts#L66

However, it only does this when backdropDismiss is also set to true:

if (lastOverlay && lastOverlay.backdropDismiss) {

Answer 3

This worked to me:

    constructor(
    public pickerCtrl: PickerController,

...and

ionViewWillLeave(){
this.pickerCtrl.dismiss();

EDIT : Recomend use a boolean to know whether is opened or not