Note: currently, the time picker is suggested to be used in Projects that do not change orientation.
If the orientation of a time picker is changed, this changes the time in the time component, but will not update the value is stored/submitted.
The Time Picker component is used to pick the time. Its intention is to be used to assist forms that need to record a time aspect, but developers could modify it for other purposes (such as a timer, or maybe an alarm clock). One way this component could be used to assist a form:
- Have a text component to hold the time, and a button ‘select time’ in the form, which brings up a popup/page with the time picker
- Press the ‘select time’ button
- Allow the user to select the time
- Have an ‘ok’ button the popup/page, which has the action ‘save time to text’ bound to a text component on the form page
- Press the ‘ok’ button, which also navigates back to the form (via an action)
- The time should now be on a text component in the form.
- Enabled form submission on the text component. Submit the form.
Alternatively, a time picker can be ‘form enabled’, and placed in a form. This will submit the current value stored in the time picker.
Features
- Quickly and accurately, pick a time.
- Smooth scrolling to select the time or am/pm. Great for mobile devices.
- Faded text on deselected components.
- On pressing a sub component (i.e. hour’s component), the text becomes opaque to denote it is selected.
- The sub components will ‘snap’ to the closest number to the center of the component.
Properties for Time Picker Component
| Name | When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel. |
| Position and Size | Sets position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height on order to create a component thats size will be maintained across devices. |
| Text properties | The properties below allow you to set the font style for the time picker. |
| Base Style | The dropdown will display all the styles you have set in the Styles Inspector. Whichever style you have selected will populate the properties below. If you alter any of the properties below for a specific use on a page, then clicking the Refresh arrow will revert the style back to its original state. Create Style – opens the Styles Inspector so you can create a new style. The new style will be added to the dropdown. Organize Style – opens the Styles Inspector. |
| Font Size | Set font size using plus and minus buttons. |
| Font Color | The color preview shows the color picker. Move around the color pad to select your color you want. It displays with its web hex code at the top and shows the RGB values below. If you know the hex code or RGB numbers you can type it directly into the boxes. |
| Opacity | Set how opaque the text will display on a scale of 0 to 1, with 0 being totally translucent. |
| Font | The drop down displays all the fonts you have in your project. Select the font you want to use. |
| Tracking | Use this property to adjust the distance between your text characters. |
| Misc Properties | This section allows you to set the colon position within the Time Picker |
| Colon Position | Set the colon position in relation to the hours and minutes text components. |
