Adding a Date Picker
Open the empty view in the
DateCalcViewController.xib file, and then open the object Library
(Tools, Library). Find the date picker (UIDatePicker) object and drag it into the view. You’ll
notice immediately that, unlike other UI elements we’ve used, the date
picker takes up a lot of screen real
estate.
Position the date picker at the
top of the screen, as shown in Figure 2. We’ll be displaying the date calculations below it.
By default, the date
picker displays a date and time, as demonstrated in our current view. As
with other controls, the Attributes Inspector can customize how the
date picker appears to the user.
Setting the Date Picker
Attributes
Choose the date picker
within the view, and then open the Attributes Inspector (Command+1),
shown in Figure 3.
The picker can be configured to
display in one of four different modes:
Date
& Time: Shows options for choosing
both a date and a time
Time: Shows only times
Date: Shows only
dates
Timer: Displays a clock-like interface for choosing a
duration
You can also set the locale
for the picker, which determines the ordering of the different
components; set the default date/time that is displayed; and set
date/time constraints to help limit the user’s choices.
For
this project, leave the default settings as they are. We want the user
to choose a date and a time that we’ll use in our calculations.
By the Way
The Date attribute is
automatically set to the date and time when you add the control to the
view.
Connecting to the
Action
When the user interacts
with the date picker, we want the showDate
action method to be called. To create this connection, select the
picker, and then open the Connections Inspector (Command+2).
Click and drag from the
circle beside Value Changed to the File’s Owner icon. When you release
the mouse button, you’ll be prompted for the action. Choose showDate,
as demonstrated in Figure 4. This should be
almost a reflex action by now!
Did
you Know?
We’ve been making a point
of using the Connections Inspector to create connections from objects
that support many different events. This is always the safest way to
know what connections you’re creating, but it isn’t the fastest. The
picker (along with switches and segmented controls) will default to
making connections using the Value Changed event if you Control-drag
from the element to the File’s Owner icon. You can use this shortcut if
you feel comfortable with the process.
