Mobile Tutorial: Using a Calendar Component to Pick a Date (iOS and Android)

From RAD Studio
Jump to: navigation, search

Go Up to Mobile Tutorials: Mobile Application Development (iOS and Android)

Calendar in Mobile Platforms

FireMonkey uses the TDateEdit component to wrap a calendar component or datepicker for the mobile target platform:

iOS7 Android

TCalenderEditInAction Ios7.png

TCalenderEditInAction Android.PNG

Note: The TCalendarEdit component used in RAD Studio XE5 or earlier is deprecated. Use the TDateEdit component instead.

To use the TDateEdit component, perform the following simple steps:

  1. Select the TDateEdit component in the Tool Palette, and drop the component onto the Form Designer. To find the component in the Tool Palette, enter the first few characters (such as "dat") in the search box (SearchGlass.png):

    After you drop the component, you can see the TDateEdit component on the Form Designer:

    Optionally, in the Object Inspector, you can set the following properties of TDateEdit:
    • ShowCheckBox: when true, displays a checkbox on the TDateEdit control. This checkbox allows you to enable/disable the TDateEdit control at run time.
    • ShowClearButton: when true, displays a button on the TDateEdit control. Click this button to clear values in this control at run time.
    TDateEditonForm CheckBox.png

  2. Basically, that's it. Run your application on either a simulator or your connected mobile device. After you tap TDateEdit, the calendar control appears, and you can select a date.

iOS6 (iPhone5) Android (LG-E612)

TDateEdit IOS6.png

TDateEdit Android1.png

Implementing an Event Handler for User Changes to the Date

After the user changes the date, the OnChange event is fired. You can implement an event handler for the OnChange event to react to the user's action.

To implement the OnChange event handler'

  1. Select the TDateEdit component.
  2. In the Object Inspector, open the Events page, and double-click the empty space next to OnChange.
  3. Write code as follows:


procedure TForm25.DateEdit1Change(Sender: TObject);
     ShowMessage(FormatDateTime('dddddd', DateEdit1.Date));


void __fastcall TForm25::DateEdit1Change(TObject *Sender)
     ShowMessage(FormatDateTime("dddddd", DateEdit1->Date));

This code shows a message dialog with a date selected. The FormatDateTime function converts the selected date to a specified format (in this case dddddd gives long-style date format):

iOS (iPad) Android (LG-E612)


TCalenderEditAndShowMessage Android.png

See Also