Click on tablecell show UIDatePicker

Question

I have a tableview controller and one of the cell is "date" and when i click i wanna show a datepicker and update the values.

table with date cell

When i click on limit date i get

table with date picker

Now here is the code:

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    if ( indexPath.section == 0 )
    {
        if ( indexPath.row == 3 )
        {
            UITableViewCell *targetCell = [tableView cellForRowAtIndexPath:indexPath];
            self.pickerView.date = [self.dateFormatter dateFromString:targetCell.detailTextLabel.text];

            // check if our date picker is already on screen
            if (self.pickerView.superview == nil)
            {
                [self.view.window addSubview: self.pickerView];
                // size up the picker view to our screen and compute the start/end frame origin for our slide up animation
                //
                // compute the start frame

                CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
                CGSize pickerSize = [self.pickerView sizeThatFits:CGSizeZero];
                CGRect startRect = CGRectMake(0.0,
                                              screenRect.origin.y + screenRect.size.height,
                                              pickerSize.width, pickerSize.height);
                self.pickerView.frame = startRect;

                // compute the end frame
                CGRect pickerRect = CGRectMake(0.0,
                                               screenRect.origin.y + screenRect.size.height - pickerSize.height,
                                               pickerSize.width,
                                               pickerSize.height);
                // start the slide up animation
                [UIView beginAnimations:nil context:NULL];
                    [UIView setAnimationDuration:0.3];

                    // we need to perform some post operations after the animation is complete
                    [UIView setAnimationDelegate:self];

                    self.pickerView.frame = pickerRect;

                    // shrink the table vertical size to make room for the date picker
                    CGRect newFrame = self.tableView.frame;
                    newFrame.size.height -= self.pickerView.frame.size.height;
                    self.tableView.frame = newFrame;
                [UIView commitAnimations];

                // add the "Done" button to the nav bar

                self.navigationItem.rightBarButtonItem = self.doneButton;
            }
        }
    }
}


- (IBAction)dateChanged:(id)sender
{
    [self.tableView cellForRowAtIndexPath:[NSIndexPath indexPathForRow:3 inSection:0]].detailTextLabel.text = [self.dateFormatter stringFromDate:[sender date]];
}

- (void)slideDownDidStop
{
    [self.pickerView removeFromSuperview];
}

- (IBAction)doneAction:(id)sender
{
    CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
    CGRect endFrame = self.pickerView.frame;
    endFrame.origin.y = screenRect.origin.y + screenRect.size.height;

    // start the slide down animation
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.3];

    // we need to perform some post operations after the animation is complete
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(slideDownDidStop)];

    self.pickerView.frame = endFrame;
    [UIView commitAnimations];

    // grow the table back again in vertical size to make room for the date picker
    CGRect newFrame = self.tableView.frame;
    newFrame.size.height += self.pickerView.frame.size.height;
    self.tableView.frame = newFrame;

    // remove the "Done" button in the nav bar
    self.navigationItem.rightBarButtonItem = nil;

    // deselect the current table row
    NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
    [self.tableView deselectRowAtIndexPath:indexPath animated:YES];

    self.navigationItem.rightBarButtonItem = self.nextButton;
}

I have three questions:

First: what is that black bar on top of datepicker and how do i remove it?

Second: what can i do for closing the datepicker when the user clicks outside the datepicker?

Third: How can i move the tableview scroll so that the field "limit date" can be visible when datepicker opens?

Sorry for the big screenshots.

score 1 · Accepted Answer · edited May 23 '17 at 10:25

What about presenting your date picker modally in UIActionSheet?

In the example above that black bar (which is probably a sizing issue) is replaced with a convenient toolbar in which you can place buttons like "save" and "cancel", and I believe that if you use a UIActionSheet and click outside of it it's automatically dismissed (I'm not sure about this), but if' it's not you can use it's dismiss method to hide it.

About the table view, you can use [myTableView scrollToRowAtIndexPath:[NSIndexPath indexPathForRow:someRow inSection:someSection] atScrollPosition:UITableViewScrollPositionMiddle animated:YES]; to set the offset of the table scroll at a particular cell you want.

The black bar is from shrinking the table view and showing the window background. Shrinking the table view is not necessary as the UIDatePicker resides above the table as it was added later to the container view. — Conor, Apr 15 '13 at 17:15

Click on tablecell show UIDatePicker

1 Answers1