Attempting to add an inline UIDatePicker to a UITa

Question

I'm attempting to create an inline DatePicker inside a TableView cell, similar to this and this SO thread.

I create the date picker using the method below, which is called when the view is loaded:

- (void)createDatePicker{
    _datePicker = [[UIDatePicker alloc]init];
    _datePicker.datePickerMode = UIDatePickerModeTime;
    _datePicker.clipsToBounds = YES;
    _datePicker.backgroundColor = [UIColor colorWithRed:0.922 green:0.937 blue:0.949 alpha:1];

    NSLog(@"date picker created");
}

I then check to see if the bottom row of the third section in my table view is selected. If it is, and the date picker already isn't showing, then I call the method to show the date picker's cell:

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if (indexPath.row == HourTimeZoneRow && self.datePickerIsShowing == NO)
    {
        NSLog(@"Time of day section");
        [self showDatePickerCell];
    } else
    {
        [self hideDatePickerCell];
    }
    [self.tableView deselectRowAtIndexPath:indexPath animated:YES];
}

Below are the methods to show the date picker's cell:

- (void)showDatePickerCell {
    [self.tableView addSubview:_datePicker];
    self.datePickerIsShowing = YES;
    self.datePicker.hidden = NO;
    [self.tableView reloadData];
    NSLog(@"Show date picker");
}

...and hide the cell:

- (void)hideDatePickerCell {
    self.datePickerIsShowing = NO;
    self.datePicker.hidden = YES;
    [self.tableView reloadData];
    NSLog(@"Hide date picker");
}

Below is the method to determine if the table view needs to add an extra cell to display the UIDatePicker.

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        switch (section) {
            case TableSectionOne:
                return TotalRowsSection1;
                break;
            case TableSectionTwo:
                return TotalRedZoneRows;
                break;
            case TableSectionThree:
                if (self.datePickerIsShowing == YES) {
                    return TableSectionThree + 1;
                }
                else {
                    return TableSectionThree;
                }
                break;
            default:
                return 0;
                break;
        }
    }

Finally, the method below is what is supposed to determine the height of the date picker's cell:

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

    CGFloat rowHeight = self.tableView.rowHeight;

    if (indexPath.row == HourTimeZoneRow){
        rowHeight = 164;
    }
    else {
        rowHeight = self.tableView.rowHeight;
    }
    return rowHeight;
}

However, what's happening is that when the last row of the third section is selected, the date picker is displayed in the first row of the first section. Does anyone have any suggestions on what I'm doing wrong?

Answer 1

You're adding the datePicker to the tableView, not to a cell within the tableView.

Remove this line from showDatePickerCell:

[self.tableView addSubview:_datePicker];

Then add it (or unhide it) within the proper cell within cellForItemAtIndexPath.

(something like:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"SimpleTableItem";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];

    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }

    if (indexPath.row == HourTimeZoneRow) {
        // show the datePicker here
    }

    cell.textLabel.text = [tableData objectAtIndex:indexPath.row];
    return cell;
}

)