Tutorial 17 - How to create Date time picker

What you will learn in this Tutorial

How to create DATETIMEPICKER

Download Source Code - Tutorials - Source for this tutorial is in appemble-tutorial-single-sel-ctrl
Reference DATETIMEPICKER control
Other pickers: CHECKBOX, NUMBER_PICKER, RADIOGROUP, SINGLE_CHOICE_DIALOG, SINGLE_CHOICE_PICKER

Introduction

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

Android iOS
../_images/date_picker11.png ../_images/date_picker_ios.png
../_images/time_picker11.png ../_images/time_picker_ios.png

Important attributes

Attribute Description / Value Mandatory
type DATETIMEPICKER 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.  

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”

How to create DATETIMEPICKER

The tutorial single_sel_ctrl displays two DATETIMEPICKERS in app-def-single-sel-ctrl/datetimepicker.xml

The code below allows the user to select Date.

<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"/>

Note

  • data_type=”DATE”
  • format_type=”MM/dd/yyyy”
  • storage_format=”yyyy-MM-dd”

The code below allows the user to select time.

<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"/>

Note

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

Run the 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/iPad x.x simulator. Click on Product -> Run.


You can try different format types. See format_type