We are trying to set the disabled=true based on a toggle on the screen. Normally, with a component like a button or input field you can set the disabled value of the component, but for some reason cannot with the date picker.
How do we go about still showing the visibility of the date picker but disabling it from use, as one can with other input components?
Below you can see we are able to visibility to false, but we still want the component to be visible, just disabled from use while the toggle is active.
Hi! Disabling the date picker is not as straightforward as with native input items such as a button or input field, but you can do this custom functionality if you want. Basically you want to open the date picker component in the component editor mode and edit its functionality. You can find the button to open the component editor mode by selecting the date picker component and at the very bottom of Properties tab, select the second icon. Note that all changes made in component editor mode are applied to every date picker in the app.
A rough outline of how I would implement this feature is to add a new property to the date picker component called disabled, and then change the logic tied to Date Picker > Label and Text > Container: Tappable Area to check first if the component is disabled and if it is, not run the rest of the code. You could also style the text/icon to show up in a different color when disabled. It’s not the same as native disabling of an element, but it will prevent the user from using the date picker while it is disabled.
On the drop-down list, we are only getting the option of “Container: Tappable area: Visible” which is why we think it’s disappearing when using the toggle instead of just “disabling” / not allowing us to click it. We still want the entirety of the component to be visible, just no able to be interacted with when the toggle is enabled.
Hello all,
I just want to show how I solved this problem. Maybe it helps other.
I only was able to do it with the hint from @Mevi (thank you at this point)
I copied the “Container: Tappable area” and renamed it to “Warte”. Displayed content is “bitte warten”
In Container “Warte” delete all logic.
Now in “Container: Tappable area” I made the logic to show “Warte” with a delay.
“Warte” is unclickable, so nobody can pick another date till the delay is over.
