how to pop up datePicker when text filed click and disappear when editing done

Question

i have view something like below

date picker view is always there how can i make it appear pop up when Enter date is clicked and when i click on back ground then date picker should go down

i have just made date picker view customary but i dont know how to do this appear and disappear thing

Answer 1

Ok. Here is some sample code for your requirement with animation.

- (void) showView
{
    [self.view addSubview:yourDatePickerView];
        yourDatePickerView.frame = CGRectMake(0, -250, 320, 50);
        [UIView animateWithDuration:1.0
                         animations:^{
                             yourDatePickerView.frame = CGRectMake(0, 152, 320, 260);
                         }];
}

And here is how to hide your DatePickerView

- (void) hideView
{
    [UIView animateWithDuration:0.5
                         animations:^{
                             yourDatePickerView.frame = CGRectMake(0, -250, 320, 50);
                         } completion:^(BOOL finished) {
                             [yourDatePickerView removeFromSuperview];
                         }];
}

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    if(textField == yourDateTextField)
    {
         [self showView];
         return NO; // preventing keyboard from showing
    }
    return YES;
}


- (void)textFieldDidEndEditing:(UITextField *)textField
{
    if(textField == yourDateTextField)
    {
         [self hideView];
    }
}

That's all you need.

Answer 2

You should identify the textfield in the delegate method.

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    if(textField == DATE_TEXT_FIELD)
    {
             //Display date picker
    }
}


- (void)textFieldDidEndEditing:(UITextField *)textField
{

        if(textField == DATE_TEXT_FIELD)
        {
                 //Hide date picker
            }
}

Answer 3

• Create one UIView reference which contains this date picker view.
• Now assign this datePickerContainerView to textField.inputView property.

• Then assign textfield.delegate to self and implement your textFieldShouldReturn method. In that method, write this lines

  [textField resignFirstResponder];

  return YES;

Now when you tap on that textfield, it will load datepicker view in place of default keyboard, as per inputview property settings.

Answer 4

Before doing the code for datePicker,make sure that you type the following line of code

    [textField resignFirstResponder];

As we know,keyboard is the default first responder of a textField.So you should resign it first and then code for picker otherwise the keyboard will pop up as well.