React: Trigger DatePicker programmatically

In the documentation, I see the open method, but I’m not clear how to use it. Is it possible this method is not available? I don’t see it IonDatetime interface in

For Angular, I’ve found this post: Trigger DatePicker programmatically - #4 by waleedshkt with this workaround ionic-tjhoo5 - StackBlitz
Does anyone have a workaround such this one for React? I tried using useRef but the ref attribute doesn’t work on an ionic component.

Any help will be appreciated!

Here’s my code attempt: iondatetime-open - CodeSandbox

sample project in stackblitz to get us started? I believe that it should work, I have used refs in past with ionic and react

Hi Aaron!
Thank you for the great tutorials! They’re very helpful!

To answers your question, here’s a some code I wrote attempting to programmatically open the datepicker, but it doesn’t work: iondatetime-open - CodeSandbox

The end goal is to allow the user to click any of the list items in a popover and open the datepicker from there. I have button to show a similar result in the code as well.


<IonItem lines="none" button onClick={() =>}>

if should be

Yes, this does open the datetime component, thanks! I tried it before but now I fixed it by defining the userRef with the html element.
But how would go about hiding this component until the open method is called. I tried using the useState for showPicker, which it’s set to true right before open() is called, but I’m getting an error of TypeError: Cannot read property 'open' of null
A hack I don’t want to use is to set this component’s visibility to hidden because it will still take space in the html body.
How would you go about this?
I’ve updated the sandbox: iondatetime-open - CodeSandbox

you are over analyizing this and making your code way more complex they it needs to be, just used display: none and move on, honestly noboday care but you… and this is not a test. :slight_smile:

I resolved this issue by adding the class:


to the IonDatetime component and it will still be in the DOM, but not rendered.
Reference: CSS Utilities - Ionic Documentation

I hope this helps someone!