Time Picker

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

A time picker is a graphical user interface that allows the user to select a time from the calendar box. For example: – You can best-use the time picker element to configure auto alerts and notifications.


When to use
Use the time picker element:To configure auto-notification and alert.To auto-execute a job.To auto log out from the app.

Time Picker Configuration

The “Time Picker” element consists of the following properties:

  • UI Configuration
  • Event Configuration

UI Configuration

For the “Time Picker” element, you can configure the following properties:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesTimePicker 1
BasicCaptionAllows you to define the title of the element.NoChoose a Time
BasicDefault ValueThis property allows you to define the default value of an element.

To define the default value:
–> Click in this box, and it displays the list of the pre-define functions, attributes, and element IDs.
–> In the list, select an attribute from which the application will fetch the default value and then display it in the element.
BasicWidget ThemeAllows you to configure a theme for your calendar. You can select any of the following themes: 
–> Android Theme: 
It displays the calendar based on the android theme.

–> IOS Theme: 
It displays the calendar based on the apple phone based theme.

–> Default: 
It displays the calendar based on the default theme widget.
BasicWrapAllows you to wrap the element around the contentNoSet as unmarked & Hide
BasicVisibleAllows you to define the default visibility of the UI element. Nomarked
BasicEnableAllows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.Nomarked
BasicMandatoryAllows the user to set an UI element to a non-skippable field.Nounmarked
BasicMessage on FailureThis property becomes visible when you select Yes under Mandatory. In the Message on Failure box, enter the error message that the application will display if the user does not perform the function on the element.NoRequiredwhen mandatory = checked
UI PropertiesStylesAllows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.NoDefault
UI Properties- BackgroundColorClick in the Color box and then select the background color of the element.NoTheme Variable (Neutral)
UI Properties- BackgroundOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.No100%
UI Properties- Alignment & SpacingMarginAllows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.NoTheme Variable (Margin)
UI Properties- Alignment & SpacingElement AlignmentClick this list to align the element as follows:
–> Right
–> Top
–> Bottom
–> Top Right
–> Top Left
–> Bottom Right
–> Bottom Left
–> Center
NoLeft Top
UI Properties- CaptionFontSelect the Font of the captionNoTheme Variable (Font Family)
UI Properties- CaptionSizeSelect the Font size of the captionNo12
UI Properties- CaptionColorSelect the color of the captionNoTheme Variable (Caption)
UI Properties- CaptionBoldSelect the Bold size of the captionNo4
UI Properties- IconSuffix SourceAllows you to configure an icon that you want to use with the element. After you configure the icon, the app will display the icon to the right of the element.

You can use the following options to configure the icon:
–> None
–> URL
–> Asset Library
UI Properties- IconSuffix URLIn this box, enter the URL of the icon. The application fetches the icon from the URL-based location and then displays it to the right of the element.YesIf Suffix Source = URL
UI Properties- IconSelect Suffix IconAllows you to fetch the image of icon from the Assets Manager module. In this box:
–> Click the asset library icon (), and the Select Asset dialog box opens.
–> In the Select Asset dialog box, select an icon, and then click Select, and you successfully configure the image of the icon.
YesIf Suffix Source = Assets
UI Properties- IconSuffix SizeIn this box, enter the numeric value (for example:-14) to define the size of the icon.No16When Suffix != None
UI Properties- IconSuffix ColorClick the Color box and then select the color to define the color of the icon.Note: – The “Color” property can only be configured for “Material” icons. If you have defined the URL to load the image, the “Color” property cannot be applied to the URL-based images.No#161616When Suffix != None
UI Properties-HintTextEnter the description of the hint text that the application displays as a brief help about the element.NoHH:MM:SS
UI Properties-HintSizeAllows you to define the size of the hint text’s font.No12 px
UI Properties-HintColorAllows you to define the hint text’s color.No#6F6F6F
UI Properties-InputFontSelect the font of the input text. For the “Time Picker” element, the input text is the date and time that the box displays after you select them.NoTheme Variable (Font Family)
UI Properties-InputSizeEnter the size of the font of the input text.No12
UI Properties-InputColorClick in the Color box and then select the font color of the input text.No#6F6F6F
UI Properties-InputBoldClick in the Color box and then select the font color of the input text.NoSet as 4 and Hide
UI Properties-InputStyleClick this list and then select any of the following styles to display the input text:
1. Normal
2. Italic
NoSet as Normal and Hide
UI Properties-Shape & DecorationTypeUnder the Shape and Decoration section, this property has the two following options:

Autofill:- If you select this option, you cannot change the element’s dimensions. When you drag the element to the canvas, this option is selected by default.

If you select Auto Fill, vDesigner places the element with the default dimensions.

Manual:- If you select this option, you can change the dimensions of the element.
UI Properties-Shape & DecorationWidth ValueEnter the width of the element in the pixel unit.No100%
UI Properties-Shape & DecorationHeight ValueEnter the height of the element in the percentage unit or pixel unit.NoSet as ___ & Disable
UI Properties-Shape & DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoShow & Disable
UI Properties-Shape & DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoShow & Disable
UI Properties-Shape & DecorationBorder RadiusIt allows you to define the element’s corners’ radius. Defining the radius of the corner makes the element’s corner round.NoTheme Variable (Border Radius)
UI Properties-Shape & DecorationBorder ColorAllows you define the color of the element’s border. To define the color:
–> In the Border Color box, click the left color box (), a color canvas open.
–> On the canvas, on the horizontal bar, move the circle to select the color.
–> In the upper section, move the circle to select the tone of the color.
DataEntity PathThis property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module.

To define the entity path:
–> Click in the Entity Path box, and a list expands.
–> The list displays several attributes from the entity.
–> In the list, select an attribute to map it to the element.

After the user performs the function on the element, the application can perform the following functions:
a. Fetches data from the attribute and then displays it in the element.
b. Stores data in the attribute.
DataRead FormatClick this list to select Time format. The application will display the date in the selected format (For example: – hh:mm).Nohh:mm

Event Configuration

on the “Time Picker” element, you can configure the following events:

  • onSelect
  • beforeSelect
Was this article helpful?