DatePicker Workshop

If you are a new visitor to our site, please read the Getting Started guide.

An instance of the UIDatePicker Control display rows of dates in its components. Using it on your view is pretty straight forward, you:

• drag a UIDatePicker control from Xcode’s Object Library, then drop it on a view’s canvas.
• connect an action to its Value Changed method.
• do what you want with the method’s return value, which is an NSDate object. This NSDate object stores the date and time the user picked from the DatePicker control.

Once you’ve place an instance of the UIDatPicker control on a view’s canvase, you can customize it to display in one of these modes:

• Date & Time – Shows options for choosing both a date and a time (default)
• Time – shows only times
• Date – shows only dates
• Time – displays a clock-like interface for choosing a duration

By default the DatePicker control automatically sets the current date and time, when you add it on a view’s canvas. You can set the DatePicker control’s attributes in the Attributes inspector panel shown in the right image above. For example; you can change the Minimum Date and Maximum Date Constraints to limit the user’s choice.

The Date Picker Application

The application you will create in this workshop will demonstrate how to use the an instance of the DatePicker control in a Single View Application, which enables the user to pick a date (start date). The application will then calculate a future date (end date), format both dates, then display them in a TextView control.

Here are calendars representing the date the user might picked from the DatePicker control, and the end date the application will calculate and display in the TextView control, which is 45 days from the picked date.

Create The Project

I want you to create a new project using the Single View Application template. Design the view by adding controls shown in Figure A. Configure attributes shown in Figure B for the DatePicker control.

Figure A	Figure B

Figure A show what the view looks like in Interface Builder, assuming the current date is September 29, 2012.

Connecting The Interface Controls

Now that you’ve designed the view’s interface, add these IBOutlet property variables and IBAction method in the ViewController’s interface file.

#import &lt;UIKit/UIKit.h&gt;<br /><br />@interface ViewController : UIViewController<br /><br />@property (strong, nonatomic) IBOutlet UIDatePicker *datePicker;<br /><br />@property (strong, nonatomic) IBOutlet UITextView *futureDateTextView;<br /><br />- (IBAction)dateChanged;<br /><br />@end<br />

Do the following to connect the IBOutlet properties and the IBAction method to the view’s controls.

• Control-click the File’s Owner object and drag it to the DatePicker control, then select the datePicker outlet.
• Control-click the DatePicker control and drag it to the File’s Owner object, then select the dateChange IBAction method.
• Control-click the File’s Owner object and drag it to the TextView control, then select the futureDateTextView outlet.

The dateChanged Method

When you connected the dateChanged IBAction method in Interface Builder, IB automatically connected it to the DatePicker control’s Value Changed event. When the user spine a wheel of the DatePicker control, the Value Changed event is automatically fired. You need to add code shown below in the dateChanged method to do the follow:

• Format the date the user picked from the DatePicker control (start date).
• Calculate and format the end date (45 days from the picked date).
• Display the formatted picked date and end date in the TextView control.

- (IBAction)dateChanged<br />{<br />  // Calculate seconds there are in 45 days<br />  NSTimeInterval totalSeconds = (24*60*60*45);<br /><br />  //Calculate the end date<br />  NSDate *endDate = [NSDate dateWithTimeInterval:totalSeconds sinceDate:self.datePicker.date];<br /><br />  // Create an NSDateFormatter object<br />  NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];<br /><br />  // Set the pattern of how you want the date to display in the TextView control<br />  [dateFormat setDateFormat:@"EEE MMMM d, yyyy"];<br />  NSString *endDateString = [dateFormat stringFromDate:endDate];<br />  NSString *datePickedString = [dateFormat stringFromDate:self.datePicker.date];<br /><br />  // Aappend and format two strings<br />  self.futureDateTextView.text = [@"Start Date: " stringByAppendingFormat:@"%@\nEnd date: %@",datePickedString,endDateString];<br />}<br />

You’ve added necessary code in the dateChanged method, now it is time to test it by running the application, select a start date from the DatePicker control. You will see output similar to what’s shown in the image below.

That’s pretty much all there is to using the DatePicker control.