How to Use UIDatePicker From UIKit in iPhone Programming

Here is a great way to ask your users to input dates on your iPhone app.

When you use UIDatePicker in your app you will a tumbler that lets users select a date that you may use in other parts of your app.

In order to use UIDatePicker you will need to implement the UIPickerViewDelegate delegate and then add a UIPicker to your subview. To retrieve the date that the user inputs you can use the target-action pattern to assign a method to execute once the user has picked a date. See the video below:

Here is the code from the example:

Implement the UIDatePickerView Delegate

The first thing we needed to do was indicate that our view controller would be acting as a delegate for the UITextField. To do this you simply need to declare it in the interface file:

#import <UIKit/UIKit.h>

//UIPicker requires an object that adopts the UIPickerViewDelegate protocol
@interface DatePicker : UIViewController<UIPickerViewDelegate> {

}

@end

 

Add the UILabel and UIDatePicker Objects

This part is straightforward enough: you essentially create a label and a date picker and add them both to the view controller’s subview collection. This is the typical pattern used to build up a view in code.

#import "DatePicker.h"

@implementation DatePicker
UILabel *label;
UIDatePicker *datePicker;

- (void)viewDidLoad {
    [super viewDidLoad];

	//Create label
	label = [[UILabel alloc] init];
	label.frame = CGRectMake(10, 10, 300, 40);
	label.textAlignment = UITextAlignmentCenter;

	//Use NSDateFormatter to write out the date in a friendly format
	NSDateFormatter *df = [[NSDateFormatter alloc] init];
	df.dateStyle = NSDateFormatterMediumStyle;
	label.text = [NSString stringWithFormat:@"%@",
				 [df stringFromDate:[NSDate date]]];
	[df release];
	[self.view addSubview:label];
	[label release];

	// Initialization code
	datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 250, 325, 250)];
	datePicker.datePickerMode = UIDatePickerModeDate;
	datePicker.hidden = NO;
	datePicker.date = [NSDate date];
	[datePicker addTarget:self
	               action:@selector(changeDateInLabel:)
	     forControlEvents:UIControlEventValueChanged];
	[self.view addSubview:datePicker];
	[datePicker release];
}

- (void)dealloc {
	[datePicker release];
	[label release];
	[super dealloc];
}

@end

 

Implement Your Action Method

This is the method that you assigned to the UIControlEventValueChanged event above using the target-action pattern.

- (void)changeDateInLabel:(id)sender{
	//Use NSDateFormatter to write out the date in a friendly format
	NSDateFormatter *df = [[NSDateFormatter alloc] init];
	df.dateStyle = NSDateFormatterMediumStyle;
	label.text = [NSString stringWithFormat:@"%@",
	             [df stringFromDate:datePicker.date]];
	[df release];
}

How this works is that when the user stops manipulating the tumbler an event called UIControlEventValueChanged occurs. Since we assigned the changeDateInLabel method as an action for this event the code in that method will execute updating the date in the label.

Time To Take Action!

Learning how to program is 5% reading and 95% action so the best way to learn is to do it yourself. Create a simple iPhone app that uses the date picker code.

Let us know how it goes in the comments below!

4 thoughts on “How to Use UIDatePicker From UIKit in iPhone Programming

  1. Thanks for the article. Was wondering if you had any tips or links to slick ways to show and hide a date picker. Seems that it needs a “done” button if you want to dismiss it. Know of any guidelines to present it (ie. push on navigation controller, present as modal, just animate it in, etc.)? Thanks again.

  2. @Julio – the easiest thing to do is to add a UIButton to your view and then assign an action to do that will make the data picker disappear. You can make the date picker disappear using this line of code:

    datePicker.hidden = YES;

    A more elegant solution is a little out of the scope of this article, but it essentially involves putting the data picker on an UIActionSheet. UIActionSheets slide in from the bottom and then slide out when you are done with them. If you search on this site you will see a video example of how to use the UIActionSheet. What you can do is add the date picker to the UIActionSheet’s subview collection (I have not tested this specifically but I am pretty sure that is the direction you would go in).

  3. How to Use UIDatePicker From UIKit in iPhone Programming…

    You’ve been kicked (a good thing) – Trackback from iPhoneKicks.com – iPhone SDK links, community driven…

  4. Please let me know if you’re looking for a article writer for your blog. You have some really great articles and I believe I would be a good asset. If you ever want to take some of the load off, I’d absolutely love to write some material for your blog in exchange for a link back to mine.
    Please send me an e-mail if interested. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>