Add DatePicker Programmatically And Display Date In iPhone

In this example we will see how to UIDatePicker implement programmatically in the code and display  date on the screen. So let see how it will worked.

Step 1: Open a Xcode, Create a View base application. Give the application name ”DatePickerWithDate”.

Step 2: Xcode automatically creates the directory structure and adds essential frameworks to it. You can explore the directory structure to check out the content of the directory.

Step 3: We need to add one background image in the project. Give the image name “1.png”.

Step 4: Open the DatePickerWithDate.h file and create an instance of UIDatePicker class and  UILabel class. So make the following changes in the file.


#import <uikit/UIKit.h>

@interface DatePickerWithDateViewController : UIViewController {

IBOutlet UIDatePicker *datePicker;
IBOutlet UILabel *datelabel;


@property(nonatomic,retain) UIDatePicker *datePicker;
@property(nonatomic,retain) IBOutlet UILabel *datelabel;




Step 5: Double click the DatePickerWithDate.xib file open it to the Interface Builder. First drag the imageview from the library and place it to the view window. Select the view and bring up Attribute inspector and select the 1.png. Now save the .xib file save it and go back to the Xcode.

Step 6: In the DatePickerWithDate.m file make the following changes in the file:


#import "DatePickerWithDateViewController.h"

@implementation DatePickerWithDateViewController

@synthesize datePicker;

@synthesize datelabel;

- (void)dealloc
[super dealloc];
[datelabel release];
[datePicker release];


- (void)didReceiveMemoryWarning
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];

// Release any cached data, images, etc that aren't in use.

#pragma mark - View lifecycle

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad
[super viewDidLoad];

datelabel = [[UILabel alloc] init];
datelabel.frame = CGRectMake(10, 200, 300, 40);
datelabel.backgroundColor = [UIColor clearColor];
datelabel.textColor = [UIColor whiteColor];
datelabel.font = [UIFont fontWithName:@"Verdana-Bold" size: 20.0];
datelabel.textAlignment = UITextAlignmentCenter;

NSDateFormatter *df = [[NSDateFormatter alloc] init];
df.dateStyle = NSDateFormatterMediumStyle;
datelabel.text = [NSString stringWithFormat:@"%@",
[df stringFromDate:[NSDate date]]];
[df release];
[self.view addSubview:datelabel];
[datelabel release];

datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 250, 325, 300)];
datePicker.datePickerMode = UIDatePickerModeDate;
datePicker.hidden = NO; = [NSDate date];

[datePicker addTarget:self
[self.view addSubview:datePicker];

[datePicker release];


- (void)LabelChange:(id)sender{
NSDateFormatter *df = [[NSDateFormatter alloc] init];
df.dateStyle = NSDateFormatterMediumStyle;
datelabel.text = [NSString stringWithFormat:@"%@",

- (void)viewDidUnload
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);




Step 7: Compile and run the application in the simulator.

You can Download SourceCode from here DatePickerWithDate

Leave a Comment:

RicOG says March 7, 2012

Hello this is great! is there a way to use this date picker for iPhone Web Application?

Srikanth says February 6, 2013

I sincearly thanks for your help for Datepicker
Thank you

Add Your Reply