Trigger DatePicker programmatically

I might be missing something but is there a way to trigger the datepicker (ionic) by a toolbar button tap and bind the selected date to a variable?


Looking for the same thing, no luck so far. It’s a component on it’s own that uses the picker module so I doubt you can do it programmatically until they change the api.

However, there is a work around that I just figured out. Here it is -
you can add a datetime component in your page and hide it. then attach a reference to it so that you can use method to show the picker. Make sure you display the selected value manually since the picker component will be hidden. Here’s a blogpost that explains the work around in details -


Hey guys,

I am trying to open date picker interface upon selecting an option in ion-select. I have made the ion-datetime element to be hidden by setting hidden="true" property.

I have given a go to adding a tag in ion-datetime like #datePicker, making a reference of the tag in a component using @ViewChild and adding a line of code in a ts function which gets executed when I select a particular ion-option. But there has been no luck so far.

Has anyone been successful when confronting with similar problem?

Any helpful reply will be highly appreciated!


Here is a working example on how to programmatically trigger a time picker.


one edition in ionic 5 is viewchild having

import { Component, OnInit, ViewChild } from "@angular/core";
import { Platform, IonDatetime } from "@ionic/angular";

  @ViewChild("startTimePicker", { static: true }) startTimePicker: IonDatetime;