Trigger DatePicker programmatically

Ionic Framework ionic-v3
#1

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?

2 Likes
#2

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.

#3

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 reference.open() 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 - https://blog.jarmemori.es/tech/2016/09/14/display_ionic_datetime_picker_programmatically.html

5 Likes
#4

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 datePicker.open() 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!

Thanks.

React: Trigger DatePicker programmatically
#5

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

3 Likes
#6

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;