Hello!
In the documentation https://ionicframework.com/docs/api/datetime, 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
node_modules/@ionic/core/dist/types/components.d.ts
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!
Edit:
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.
@ionic_unicorn
<IonItem lines="none" button onClick={() => datepickerRef.current.open()}>
if should be datepickerRef.current.open()
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. 
I resolved this issue by adding the class:
className="ion-hide"
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!