Date Picker

It allows user to input a date and time data by picking from a scrollable list.

Usage

In most of the cases, we simply use "Date Picker" component to show a list of date and time to allow user select a suitable input and identify the data by storage name. It allows you to get back the user input data by typing ${ NAME YOU DEFINED IN STORAGE NAME } in anywhere of the app.

Action [ Created | Date Selected ]

Simply click the action you want to define and drag components inside.

Created:

Mostly used to define further UI design within the Date Picker.

Date Selected:

It's used to define action when user selected a value from the picker.

Example

Reload a "Text" component (*Be reminded that you should set a alias to that "Text" component first) displayed on screen when user selected a value. The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

Date Picker -> (Date Selected) -> Reload Action [Action: TEXT ALIAS]

Properties

Simply click a gear on the right hand corner of related "Range" component to edit the properties.

Format [ date | iso | utc ] - TBC

• Date - TBC
• ISO - TBC
• UTC - TBC

Mode [ datetime | date | time ] - It's used to set the mode of date picker.

• Datetime - Date picker will be displayed with both date and time input for user selection.
• Date - Date picker will be displayed with only date input for user selection.
• Time - Date picker will be displayed with only time input for user selection.

Default Datetime - Preconfigured the date and time value.

Time zone - By default, the time zone will follow user’s phone operating system.