Time range
The time range component lets you specify a time range by entering or selecting a start and end time. This article describes how to configure the time range component.
Step 1: Add the component
-
Create a mobile application. See Create a mobile application for more information.
-
In the mobile application editor, click the Components icon
on the left. -
(Optional) Add column components to set up the page layout. For more information, see Horizontal and vertical columns.
-
Enter Time range in the search box above the component list on the left of the canvas. Find the component and drag it onto the canvas.
See Add a component for more information on adding a component.
After you add the component, the property panel appears on the right with the Style and Interaction tabs. On the Style tab, you can configure basic properties such as visibility, opacity, width, height, and margins, as well as time-related properties such as Size (Medium), Theme (Light), Time unit (accurate to the second), and Default time.
Step 2: Configure the style
-
On the Style tab, configure the component's appearance.
Parameter
Description
Size
Sets the component size. Supported values: Large, Medium, and Small.
Theme
Sets the component's color theme: Light or Dark.
Time unit
Sets the time selection granularity. Supported units are Day, Hour, Minute, and Second.
Default time
Select the checkbox to enable the default time. You can set a default start time and end time.
The reference time (00:00) is the time when the page is opened. You can set an offset by adding or subtracting time from this reference. For example, to set the start time to 7 days before the page opens and the end time to 1 day after, select Day as the time unit. Then, set the start time to the current time
-7days and the end time to the current time+1day. -
Adjust the component's width, height, and position on the page. For more information, see General styles.
Step 3: Configure interactive actions
In the mobile application editor, on the Interaction tab on the right, click Add Interaction to set the Event and Action.
This component supports the Value Change event. For example, when the component's value changes, the Refresh Component action is executed. This action updates the data displayed in a specified component.
For more information, see Configure interactions.
You can preview and debug the data and effects displayed by the component. For more information, see Preview and debug.