Launch the actions of one component (Date Picker) with another component (text)

Hello, I would like to use the functionality of the Date Time Picker component:


But I don’t want to use it’s UI:

Instead, I just want it to use the on click event of a button I made from a block, that also displays the currently chosen date:


I think I have all this covered except how to cause the on-click event of the “button” to activate a Date Picker. I can then bind the date picker result to the text field in the button.

Condensed: How to cause one UI element to launch another (not shown in the UI), with all event handlers for both elements available.


Hi @Owen_Fowler

It sounds more like a hack rather than the right way =)
I can propose you a few options:

  1. create your own custom UI component

  2. add styles to decorate a specific DateTimePicker Input to make it look like a button

  3. if you are familiar with JS and web development you can try to play with DOM elements to fire “click” event for the DateTimePicker Input, but pay attention there is no guarantee it will work in some time since the component comes from 3rd party library and any non-documented API might stop working in next releases


Thanks Vlad. I will go the styling route. I could use a little help on that; I have an open post in the support forum on styling an element using extensions:

Question on using extensions to style components

Having that answered could help me on this part as well as the part I described in that post.

Hi there @Owen_Fowler,

I’ve already answered that, right here: Unable to use CSS extensions for styling same UI component type multiple ways - #3 by Marina.Kan


1 Like