Trigger DatePicker programmatically

#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

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

#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.

#5

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