Mobile Tutorial: Using a Calendar Component to Pick a Date (iOS and Android)
Go Up to Mobile Tutorials: Mobile Application Development (iOS and Android)
Contents
Calendar in Mobile Platforms
FireMonkey uses the TDateEdit component to wrap a calendar component or datepicker for the mobile target platform:
iOS7 | Android |
---|---|
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:
- 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 ():
- 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.
- 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) |
---|---|
|
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'
- Select the TDateEdit component.
- In the Object Inspector, open the Events page, and double-click the empty space next to OnChange.
- Write code as follows:
Delphi:
procedure TForm25.DateEdit1Change(Sender: TObject);
begin
ShowMessage(FormatDateTime('dddddd', DateEdit1.Date));
end;
C++Builder:
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) |
---|---|
|
See Also
- Mobile Tutorial: Using a Button Component with Different Styles (iOS and Android)
- Mobile Tutorial: Using Combo Box Components to Pick Items from a List (iOS and Android)
- Date and Time Support
- Type conversion routines
- FMX.DateTimeCtrls.TDateEdit
Samples
- Date Picker sample