iOS Show UIDatePicker between UITableViewCells

Question

In iOS 7, developers are encouraged to show date pickers between table cells when needed for input, and then hide them when done. How can I achieve this effect?

Answer 1

Vasilica Costescu has a great tutorial on it here: http://masteringios.com/blog/2013/10/31/ios-7-in-line-uidatepicker/

And for static tables: http://masteringios.com/blog/2013/11/18/ios-7-in-line-uidatepicker-part-2/

Sample code here: https://github.com/costescv/InlineDatePicker

The key bits are the hide/show methods:

 - (void)showDatePickerCell {
    self.datePickerIsShowing = YES;
    [self.tableView beginUpdates];
    [self.tableView endUpdates];

    self.datePicker.hidden = NO;
    self.datePicker.alpha = 0.0f;

    [UIView animateWithDuration:0.25 animations:^{
        self.datePicker.alpha = 1.0f;
    }];
}

- (void)hideDatePickerCell {
    self.datePickerIsShowing = NO;
    [self.tableView beginUpdates];
    [self.tableView endUpdates];

    [UIView animateWithDuration:0.25
                     animations:^{
                         self.datePicker.alpha = 0.0f;
                     }
                     completion:^(BOOL finished){
                         self.datePicker.hidden = YES;
                     }];
}

And this UITableViewDelegate method will "hide" the row by setting its height to 0 :

-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

    if (indexPath.section == 0 && indexPath.row == 4 && self.datePickerIsShowing == NO){
        // hide date picker row
        return 0.0f;
    }
    return [super tableView:tableView heightForRowAtIndexPath:indexPath];
}

You can call the hide/show methods from a button or just by selecting rows in the table. (Note: If there are text fields the other rows, then you may need to hide the datePicker in the textFieldDidBeginEditing delegate method).

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    if (indexPath.section == 0 && indexPath.row == 4) {
        if (self.datePickerIsShowing){
            [self hideDatePickerCell];
        }else {
            [self showDatePickerCell];
        }
    }
    [self.tableView deselectRowAtIndexPath:indexPath animated:YES];
}

EDIT: Be careful using more than a couple of these inline picker views on in a single table. I've noticed that they tend to load very slowly from storyboards: iOS 7 slow to open UITableViewController with UIPickerView