如何在不单击“取消”按钮的情况下关闭Ionic2 Datetime弹出窗口

Question

In an Ionic 2 project, I need make the user logout after a certain idle timeout. While doing so, I noticed that I cannot close the Datetime popup is before invoking the logout event and redirecting to the login page. I need to close that popup before redirecting to the login page. Below is the code sample I an working on

<ion-datetime (ionCancel)="onCancelDateTime()" [(ngModel)]="dateTime">

</ion-datetime>

The (ionCancel) event is fired when close the popup.

Is there a way to invoke the firing of this event programmatically?

Or is there another way to close this Datetime popup?

Answer 1

Currently there is no official documented Ionic 3 way to close the datetime picker programmatically.

However we can use Javascript 'dispatchEvent' method to trigger a click on the 'Cancel' button of Datetime picker.

Here is how to do it:

// Get the reference to the clear button of Datetime picker.
var pickerClearButton = document.getElementsByClassName("picker-button")[0];

// Create a click event to be triggered
var clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});

// Trigger the event
pickerClearButton.dispatchEvent(clickEvent);

I believe this will do the job!!

Answer 2

Solved : In the html in the element add

<ion-datetime #dateTime .....></ion-datetime>

In the controller :

@ViewChild("dateTime") dateTime : DateTime;

// close function :=> 
// you can use this function in a timeout if you like to close it that way
public closeDateTimeModal():void {
  this.dateTime._picker.dismiss();
}

Tested and its working. Cheers!