Date/Time Picker
This action allows the user to select a date and time. You could use it to schedule appointments, set a reminder for a specific date, choose travel dates and times, etc.
When this action is triggered, it opens the graphical calendar and clock interface that the user can interact with to select a specific date and time.
Types Date/Time Picker
You can choose to open the following types of Date/Time picker dialog:
Date: Allows you to only select a date.
Date+Time: Allows you to select the date followed by the time.
Time: Allows you to only select a time.
Adding Date/Time Picker action
Follow the steps below to add this action to any widget.
Select the Widget (e.g., Container, Button, etc.) on which you want to add the action.
Select Actions from the properties panel (the right menu), If it's the first action, click + Add Action button. Otherwise, click the "+" button below the previous action tile (inside Action Flow Editor) and select Add Action.
Search and select the Date/Time Picker (under Widget/UI Interactions) action.
Set the Date/Time picker type.
By default, the picker shows the current date/time. You can change this by adjusting the Default Date/Time.
To define the range of selectable dates, use the Minimum Date/Time and Maximum Date/Time properties. Click on Unset to specify your dates.
Control whether the past and future dates/times are selectable with Allow Past Date/Time and Allow Future Date/Time. Tip: If you explicitly set the min or max date, this option will be disabled.
For an iOS-style display, activate the Use Cupertino-style toggle.
For more personalized styling, turn off Use Default Theme and tweak the settings in the Appearance Properties section.
After the user has selected the desired date and time, the picker will close automatically, and the selected date/time can then be accessed via the Widget State > Date Picked.
Here's an example of adding the date time picker action and displaying the value in a Text widget.
Last Updated Date: December 1, 2023
Last updated
