Home > iphone > iPhone Note #6: Presenting a DatePicker as a ViewController Modally

iPhone Note #6: Presenting a DatePicker as a ViewController Modally

August 13th, 2009 Rupert

Part 1: Creating your own control inside a view controller..

1. File -> New. Choose UIViewController subclass. Tick the checkbox “With XIB for user interface”. Save it as “DatePickerViewController”.

2. Open the DatePickerViewController.xib from IB.

3. In IB, drag a UIDatePicker and a UIButton as shown below.

note-5-1.gif

4. In DatePickerViewController.h,

#import
 
@protocol DatePickerViewControllerDelegate;
 
@interface DatePickerViewController : UIViewController {
	IBOutlet UIDatePicker *datePicker;
	id delegate;
}
 
@property (retain) IBOutlet UIDatePicker *datePicker;
@property (assign) id delegate;
 
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil;
 
- (IBAction)doneButtonPressed:(id)sender;
@end
 
@protocol DatePickerViewControllerDelegate
 
@optional
-(void)datePickerViewController:(DatePickerViewController *)controller didChooseDate:(NSString *)chosenDate;
 
@end

5. Now, lets hook up the “doneButtonPressed” in IB. In IB -> Tools -> Connections Inspector. Drag the touch “Touch Up Inside” event to the File’s Owner which is DatePickerViewController. Choose the method “doneButtonPressed:” when it shows up.

note-5-2.gif

6. Next, implement the doneButtonPressed

#import "DatePickerViewController.h"
 
@implementation DatePickerViewController
 
@synthesize datePicker, delegate;
 
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
        // Custom initialization
		self.title = @"Date Picker";
    }
    return self;
}
 
 
//-(void)datePickerViewController:(DatePickerViewController *)controller didChooseDate:(NSString *)chosenDate;
 
- (IBAction)doneButtonPressed:(id)sender
{
    if ([self.delegate respondsToSelector:@selector(datePickerViewController:didChooseDate:)]) {
		NSDateFormatter *dateFormatter = [[[NSDateFormatter alloc] init]  autorelease];
		[dateFormatter setDateStyle:NSDateFormatterMediumStyle];
 
		NSString *dateString = [dateFormatter stringFromDate:[datePicker date]];
 
        [self.delegate datePickerViewController:self didChooseDate:dateString];
    }
}
 
- (void)dealloc {
	[datePicker release];
    [super dealloc];
}
 
@end

Part 2: Displaying the view controller modally

7. From this point on, I will refer to JobProfileViewController as the client. The client will create and present the DatePickerViewController modally (which is now referred to as picker). Once the user is finished using the picker and hits the “Done” button, the client will dismiss the picker and process the returned results.

8. Make the client conform to the DatePickerViewControllerDelegate.

#import "DatePickerViewController.h"
 
@interface JobProfileViewController : UIViewController {

9. Trigger an event to create and present the picker modally. In my case, its a button which is hooked up to showDatePicker method. Now, make the client as the delegate for the picker. Present the content modally then release the object.

JobProfileViewController.h:

- (IBAction)showDatePicker{
	DatePickerViewController *datePickerViewController = [[DatePickerViewController alloc] initWithNibName:@"DatePickerViewController" bundle:nil];
	datePickerViewController.delegate = self;
 
	[self presentModalViewController:datePickerViewController animated:YES];
 
	[datePickerViewController release];
}

10. Since the client is now the delegate for the picker, we can implement “didChooseDate” method inside the client. It is good practice that whoever (in our case the client) presents the content modally should also dismiss the content. Process what needs to be done, then let’s dismiss the modal content. Note: There is only one modal content for every view controller.

JobProfileViewController.h:

-(void)datePickerViewController:(DatePickerViewController *)controller didChooseDate:(NSString *)chosenDate{
	NSLog(@"Chosen Date as String: %@", chosenDate );
 
	job.startDate = chosenDate;
	[startDate setTitle: chosenDate forState: UIControlStateNormal];
 
	[self dismissModalViewControllerAnimated:YES];
}

UPDATE OCT 2, 2009: Download DatePickerModalExample.zip

Categories: iphone Tags:
  1. Stan
    September 27th, 2009 at 22:22 | #1
    Reply | Quote

    Hi Rupert,
    I m very new with Iphone application. I’ve just got a book from Apress.
    Also, I need to create a simple application using 3 textboxes that need to launch a DatePicker like yours (as a modal view).
    I tried your code but I think my knowledges are too limited.
    Is it possible for you to send me your code (as a project) ?
    I thank you in advance.
    Stan

  2. rupert
    October 2nd, 2009 at 16:36 | #2
    Reply | Quote

    Hi Stan,

    Sorry for the delayed response. I just got back to Australia from Beijing just recently. Anyway, I have uploaded the source code above. Please let me know if it works for you.

    Regards,
    Rupert

  3. Rod
    September 29th, 2010 at 16:35 | #3
    Reply | Quote

    Hi Rupert,

    Thanks for the sample above.
    I was wondering if you could show how to make the modal picker show up at the bottom of the view with a transparent view so the user can still see the data in the background.
    Any help would be appreciated.

    Thanks,

    Rod

  4. viviana
    November 18th, 2010 at 15:08 | #4
    Reply | Quote

    Hi Rupert,
    I am trying to create 2 buttons that are independent each other, so you press one and you have the date picker coming out and display the date, then you have a second button, you press it and date picker comes out displaying an other date. Do you know how I can do that?
    Thank you very much!
    your help is precious!

Comments are closed.