Date Time
Check out the function of the Date Time element.
You can add the Date Time element from the Elements panel by dragging and dropping it to the screen. If you drag it to an empty area on the screen, it is added with the Row element. If you drag it into a column, you just add the Date Time element.
Adding Date Time
You can add the Date Time element from the Elements panel by dragging and dropping it to the screen. If you drag it to an empty area on the screen, it is added with the Row element. If you drag it into a Column you just add a Date Time element.
Date Time supports both web and mobile applications.
For the Date Time element, you can make different settings for both the date and the time. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.
Value
As you can give a static value, you can also get dynamic values with Symbol Picker.
Placeholder
When you want the user to enter a date and time, you can add a predefined placeholder text (for example, "Select Date") to the date field.
The Placeholder is displayed when the value of the DateTime element is null.
Allow Clear
This feature determines whether you allow the user to clear (delete) their date and time selection. When enabled, the user can remove the date or time they selected.
Format
It determines how date and time data will be displayed, for example, in formats such as Day/Month/Year Hour:Minute.
When the DateTime element is selected, the properties panel contains a dropdown for Formatter.
In the dropdown, there are options like YYYY-MM-DD HH:mm:ss, DD-MM-YYYY HH:mm:ss, hh:mm:ss, mm:ss, HH:mm.
YYYY-MM-DD HH:mm:ss: This format displays the date and time as year-month-day hour:minute:second. For example, it represents the date and time "2023-10-20 15:30:45."
DD-MM-YYYY HH:mm:ss: In this format, the date is displayed as day-month-year hour:minute:second. For example, it represents the date and time "20-10-2023 15:30:45."
hh:mm:ss: This format only shows the hour:minute:second, but it uses a 12-hour time format. For example, "03:30:45 PM" represents 3:30:45 PM.
mm:ss: In this format, only the minutes and seconds are shown. For example, "15:45" represents 15 minutes and 45 seconds.
HH:mm: This format only shows the hour and minute and uses a 24-hour time format. For example, "15:30" represents 3:30 PM.
DD/MM/YYYY You can set the formatting settings such as HH/MM/SS.
Disable Before Date
This feature prevents the user from selecting dates before a specific date. It's often used to set restrictions for future dates.
Use 12 Hours
Specifies whether you want to display the time in a 12-hour format (AM/PM) or a 24-hour format.
Hour Step
Sets the interval for the selection of hours or minutes by the user. For example, it allows for selection every half hour instead of every hour.
Minute Step
You can adjust the minute step value. For instance, consider a scenario where a vehicle delivery can only be made every 30 minutes.
Second Step
You can add a step value in seconds, as in hours and minutes.Just like with hours and minutes, you can add a step value for seconds as well.
Authorization
You can use the authorization options for the Date Time element.
Visibility
You can manage the visibility of the element. It is always visible or hidden, or you can make it appear or hide depending on a condition.
You can add the actions that you can add to the Date Time element with Add Actions.
2. Styling
You can make additional edits to the Date Time element by adding a layout, text, fill, border, or shadow.
You can make visual adjustments such as environmental interior spaces and sizing.
You can adjust the properties such as Date Time text and the color and size of the icon with the Text section.
You can add color or image to Date Time body.
You can add lines to the outer edges of Date Time and give corner bevels.
You can add a shadow effect to the Date Time element.
Last updated
