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

From Appmethod Topics
Jump to: navigation, search

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


Calendar in FireMonkey Mobile Applications

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

iOS (iPad) Android (LG-E612)

TCalenderEditInAction.PNG

TCalenderEditInAction Android.PNG



You can easily use the TCalendarEdit component with the following simple steps:

  1. Select the TCalendarEdit component in the Tool Palette, and drop the component onto the Mobile Form Designer. To find the component in the Tool Palette, enter the first few characters ("Cale") in the search box (SearchGlass.png):
    SelectCalenderEdit.png

    After you drop the component, you can see your TCalendarEdit component on the Mobile Form Designer:
    TCalenderEditOnForm.png

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

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 an OnChange event handler:

  1. Select the TCalendarEdit 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.CalendarEdit1Change(Sender: TObject);
begin
  ShowMessage(FormatDateTime('dddddd', CalendarEdit1.Date));
end;


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.PNG

TCalenderEditAndShowMessage Android.png


WhiteSpace50.png

See Also