Show datepicker on textfield tap Show datepicker on textfield tap ios ios

Show datepicker on textfield tap

UIResponder, from which UITextField inherits, defines a property called inputView. This property (a UIView *) can define a view that will be displayed instead of the keyboard when that UIResponder becomes the first responder.

Thus, if you want a UIDatePicker to appear when you tap in a textField (ie, you make that textField the first responder), then you can say, naïvely:

UIDatePicker *datePicker = [[UIDatePicker alloc] init...];... configure datePicker ...[myTextField setInputView:datePicker];

Now, when your UITextField is tapped, a UIDatePicker will be brought up instead.


You'll want to do more than this, because you'll need to handle different orientations and different idioms.

But that's the basic idea.

(And if you want a toolbar above the UIDatePicker, that's what the inputAccessoryView property is for...)

In viewDidLoad of ViewController.m

- (void)viewDidLoad {    [super viewDidLoad];    UIDatePicker *datePicker = [[UIDatePicker alloc]init];    [datePicker setDate:[NSDate date]];    datePicker.datePickerMode = UIDatePickerModeDate;    [datePicker addTarget:self action:@selector(dateTextField:) forControlEvents:UIControlEventValueChanged];    [txtFieldBranchYear setInputView:datePicker];}

Add one method in your ViewController

-(void) dateTextField:(id)sender{    UIDatePicker *picker = (UIDatePicker*)txtFieldBranchYear.inputView;    [picker setMaximumDate:[NSDate date]];    NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];    NSDate *eventDate =;    [dateFormat setDateFormat:@"dd/MM/yyyy"];    NSString *dateString = [dateFormat stringFromDate:eventDate];    txtFieldBranchYear.text = [NSString stringWithFormat:@"%@",dateString];}

txtFieldBranchYear is an outlet of UITextField

Add a datepicker view and uitoolbarview to your view.For example

CGFloat toolbarHeight = 44.f;CGFloat datePickerHeight = 140.f;CGFloat containerViewHeight = toolbarHeight+datePickerHeight;//create container view for datepicker and toolbarUIView *containerView = [[UIVIew alloc] initWithFrame:CGRectMake(0.f, [self.view bounds].size.height+containerViewHeight, [self.view bounds].size.width, containerViewHeight)];//after init toolbar set the frametoolBar.frame = CGRectMake(0.f,0.f,containerView.frame.size.width, toolbarHeight];//then add on toolbar button save and release it after add//after init datePicker set the framedatePicker.frame = CGRectMake(0.f, toolbarHeight, containerView.frame.size.width, datePickerHeight);//add datePicker and toolBar to containerView[containerView addSubview: toolBar];[containerView addSubview: datePicker];[toolBar release];[datePicker release];//add containerView to main view[self.view addSubview: containerView];[containerView release];

So when view did load they are will be hidden Y of contener view is outside of the your view frame.

Now you should assign property delegate of UITextFieldDelegate

textfield.delegate = self;

In the method of delegate textFieldDidBeginEditing see UITextFieldDelegate you should fire method that will show your datePicker and toolbar.If you have many textFields to define which is was selected use tag property, which is integer and you can use switch instead of many if conditions.

To show your datePicker and toolbar you should change the Y of containerView frame.Here is how to do that

CGRect containerViewFrame = containerView.frame;containerViewFrame.y -=containerViewHeight;containerView.frame = containerViewFrame;

To hide just plus the containerViewHeight variable.You can use UIViewAnimations to show it with some animation. For example UIViewAnimationCurveEaseInOut