Controls: DATETIMEPICKER

What you will learn in this chapter
DATETIMEPICKER control
Attributes, format_type
Other pickers: CHECKBOX, NUMBER_PICKER, RADIOGROUP, SINGLE_CHOICE_DIALOG, SINGLE_CHOICE_PICKER
Reference: Actions, Data Sourcing, appearance

DATETIMEPICKER control

DATETIMEPICKER control is used to allow the user to select date, or time, or date and time.

Attributes

Attribute Description / Value Mandatory
type DATETIMEPICKER Yes
x Defines the starting x position of the control Yes
y Defines the starting x position of the control Yes
width Defines the width of the control Yes
height Defines the height of the control Yes
appearance_name Defines the appearance of the control Yes
field_name Place holder for user input Yes
data_type DATE, TIME default is DATE
format_type Defines the display format of time or date. Learn more about format_type  
storage_type Defines the storage format of time or date. If storage format is different than the display format format for date and time, then storage_type is used. When storage_type is not defined, it is assumed that storage_type is same as format_type.  
default_value   No
permission READWRITE default is READWRITE

Note

  • You can specify storage_type different from format_type. For example if you want the user to see MM/dd/yyyy but you do want to store the date as yyyy-MM-dd, then format_type=”MM/dd/yyyy” storage_type=”yyyy-MM-dd”

format_type

Examples:

data_type format_type/storage_format Result on control Android Picker iOS Picker
DATE MM/dd/yyyy ../_images/mmddyyyy.png ../_images/date_picker1.png ../_images/ios_datepicker1.png
DATE EEE, d MMM ../_images/EEE_d_MMM.png ../_images/date_picker2.png ../_images/ios_datepicker1.png
DATE EEE, d MMM yyyy ../_images/day_dd_mm_yyyy.png ../_images/date_picker5.png ../_images/ios_datepicker3.png
TIME hh:mm a ../_images/hh_mm_a.png ../_images/time_picker1.png ../_images/ios_timepicker1.png
TIME hh ‘o’‘clock’ a, zzzz ../_images/gmt.png ../_images/time_picker3.png ../_images/ios_timepicker2.png

For more formats click on date time examples

DATETIMEPICKER Example: The code below shows the use of DATETIMEPICKER control:

<control type="TEXT" x="2" y="15" width="30" height="8" appearance_name="black" data_type="VARCHAR"
        default_value="Select Date"/>
<control type="DATETIMEPICKER" x="35" y="14" width="60" height="8" appearance_name="edit_box" data_type="DATE"
                format_type="MM/dd/yyyy" default_value="2012-10-17" field_name="day" storage_format="yyyy-MM-dd"/>
  • In the example above, DATETIMEPICKER allows the user to select date.

    • data_type=”DATE”
    • format_type=”MM/dd/yyyy”
    • storage_format=”yyyy-MM-dd”
<control type="TEXT" x="2" y="24" width="30" height="8" appearance_name="black" data_type="VARCHAR"
            default_value="Select Time"/>
<control type="DATETIMEPICKER" x="35" y="23" width="60" height="8" appearance_name="edit_box" data_type="TIME"
                format_type="hh:mm a" default_value="8:00 am" field_name="day" storage_format="HH:mm"/>
  • In the example above DATETIMEPICKER allows the user to select time.

    • data_type=”TIME”
    • format_type=”hh:mm a”
    • storage_format=”HH:mm”

Reference tutorial

This chapter uses source code from appemble-tutorial-single-sel-ctrl. If you have not downloaded tutorial source code, click on Download Source Code - Tutorials

Android - Right click on appemble-tutorial-single-sel-ctrl and click on Run as Android application.

iOS - Select scheme appemble-tutorial-single-sel-ctrl and iPhone x.x simulator. Click on Product -> Run.