How can I show a UIDatePicker inside a Popover on iPad using StoryBoard?

15,062

Solution 1

Solved

All I have to do is instantiate the StoryBoard Date Picker View Controller like :

...
DatePickerViewController* popoverContent = [[DatePickerViewController alloc] init];

popoverContent =[[UIStoryboard storyboardWithName:@"MainStoryboard"
                                         bundle:nil]
               instantiateViewControllerWithIdentifier:@"DatePickerVC"];
//resize the popover view shown
//in the current view to the view's size
popoverContent.contentSizeForViewInPopover = CGSizeMake(320, 216);
...

where the identifier is set in StoryBoard Attributes Inspector

Where to set the View controller Identifier

and now it is shown

DatePicker from DatePickerViewController is now showed

Solution 2

You might want to avoid all the work in the storyboard by creating the ViewController and the DatePicker programmatically:

//build our custom popover view
UIView *v = [[UIView alloc] init];
CGRect pickerFrame = CGRectMake(0, 0, 320, 216);
UIDatePicker *pView=[[UIDatePicker alloc] initWithFrame:pickerFrame];
pView.datePickerMode = UIDatePickerModeDate;

self.datePicker = pView;
[v addSubview:self.datePicker];

UIViewController *popoverContent = [[UIViewController alloc]init];
popoverContent.view = v;


//resize the popover view shown
//in the current view to the view's size
popoverContent.contentSizeForViewInPopover = CGSizeMake(320, 216);

// dismiss existing popover
if (self.pcDatePicker)
{
    [self.pcDatePicker dismissPopoverAnimated:NO];
    self.pcDatePicker = nil;
}

//create a popover controller with my DatePickerViewController in it
UIPopoverController *popoverControllerForDate = [[UIPopoverController alloc] initWithContentViewController:popoverContent];

//Set the delegate to self to receive the data of the Datepicker in the popover
popoverControllerForDate.delegate = self;

//Adjust the popover Frame to appear where I want
CGRect myFrame = sender.frame;//CGRectMake(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, 320,     200);
myFrame.origin.x = 260;
myFrame.origin.y = 320;

//Present the popover
[popoverControllerForDate presentPopoverFromRect:myFrame
                                          inView:self.view
                        permittedArrowDirections:UIPopoverArrowDirectionAny
                                        animated:YES];

self.pcDatePicker = popoverControllerForDate;

And then use the delegate Method to get the date:

- (void)popoverControllerDidDismissPopover:(UIPopoverController *)popoverController
{
    self.startDate = self.datePicker.date;
}
Share:
15,062
David Cespedes
Author by

David Cespedes

iOS Developer

Updated on June 05, 2022

Comments

  • David Cespedes
    David Cespedes about 2 years

    I have achieved to show the datepicker inside the popover, doing it programmatically as it is shown in UIDatePicker in UIPopover.

    But I have been trying to do it in interface Builder, I already made a View Controller named DatePickerViewController.m with a DatePicker in it and its corresponding IBoulet

    #import <UIKit/UIKit.h>
    
    @interface DatePickerViewController : UIViewController
    @property (strong, nonatomic) IBOutlet UIDatePicker *birthdayDatePicker;
    
    @end
    

    DatePicker inside DatePickerViewController.m in StoryBoard

    Then I need this to be shown in a popover when the Birthday text field is being edited. so I use the following code

    - (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{
        //Assign DatePicker to Birthday TextField
        //build our custom popover view
        DatePickerViewController* popoverContent = [[DatePickerViewController alloc] init];
        //resize the popover view shown
        //in the current view to the view's size
        popoverContent.contentSizeForViewInPopover = CGSizeMake(320, 216);
    
        // dismiss existing popover
        if (self.popoverControllerBirthday)
        {
            [self.popoverControllerBirthday dismissPopoverAnimated:NO];
            self.popoverControllerBirthday = nil;
        }
    
        //create a popover controller with my DatePickerViewController in it
        UIPopoverController *popoverControllerForDate = [[UIPopoverController alloc] initWithContentViewController:popoverContent];
        //Set the delegate to self to receive the data of the Datepicker in the popover
        popoverControllerForDate.delegate = self;
        //Adjust the popover Frame to appear where I want
        CGRect myFrame =textField.frame;
        myFrame.origin.x = 260;
        myFrame.origin.y = 320;
    
        //Present the popover
        [popoverControllerForDate presentPopoverFromRect:myFrame 
                                              inView:self.view 
                            permittedArrowDirections:UIPopoverArrowDirectionDown 
                                            animated:YES];
        self.popoverControllerBirthday = popoverControllerForDate;
        return NO; // tells the textfield not to start its own editing process (ie show the keyboard)
    
    }
    

    And I also import the custom DatePickerViewController in my current ViewController

    #import "DatePickerViewController.h"
    

    But it is not showing the datepicker inside the popover.

    enter image description here

    Does anybody know what could be happening?