Fitting a UIDatePicker into a UIActionSheet

Question

I'm trying to get a UIDatePicker with a UIButton to show up in a UIActionSheet. Unfortunately it gets cropped off and the entire Date Picker is not visible. I have not even attempted to add the UIButton yet. Can anyone suggest on getting the entire view to fit properly? I'm not sure how to add the proper dimensions as UIActionSheet seems to lack an -initWithFrame: type constructor.

UIActionSheet *menu = [[UIActionSheet alloc] initWithTitle:@"Date Picker" 
                                                  delegate:self
                                         cancelButtonTitle:@"Cancel"
                                    destructiveButtonTitle:nil
                                         otherButtonTitles:nil];

// Add the picker
UIDatePicker *pickerView = [[UIDatePicker alloc] init];
pickerView.datePickerMode = UIDatePickerModeDate;
[menu addSubview:pickerView];
[menu showInView:self.view];

[pickerView release];
[menu release];

I've also tried with something similar to:

UIActionSheet *menu = [[UIActionSheet alloc] initWithFrame:CGRectMake(200.0, 200.0, 100.0f, 100.0f)];

The coords are ofcourse not realistic, but they don't seem to affect the position/size of the UIActionSheet.

Answer 1

You can use something like this (adjust the coordinates):

    UIActionSheet *menu = [[UIActionSheet alloc] initWithTitle:@"Date Picker" 
                                                  delegate:self
                                         cancelButtonTitle:@"Cancel"
                                    destructiveButtonTitle:nil
                                         otherButtonTitles:nil];

    // Add the picker
    UIDatePicker *pickerView = [[UIDatePicker alloc] init];
    pickerView.datePickerMode = UIDatePickerModeDate;
    [menu addSubview:pickerView];
    [menu showInView:self.view];    
    [menu setBounds:CGRectMake(0,0,320, 500)];

    CGRect pickerRect = pickerView.bounds;
    pickerRect.origin.y = -100;
    pickerView.bounds = pickerRect;

    [pickerView release];
    [menu release];

But you better create a fullscreen view with a UIDatePicker and a navigation bar. For an example see UICatalog -> Pickers sample from the iPhone DevCenter.

Answer 2

Try adding following line to resolve disabled buttons issue

[menu sendSubviewToBack:pickerView];

Answer 3

Dmitry's answer is almost correct. However, the frame of the actionsheet is too small, and therefore touches near the bottom of the picker are ignored. I have corrected these problems:

UIActionSheet *menu = [[UIActionSheet alloc] initWithTitle:@"Date Picker" 
                                                  delegate:self
                                         cancelButtonTitle:@"Cancel"
                                    destructiveButtonTitle:nil
                                         otherButtonTitles:@"OK",nil];    
// Add the picker
UIDatePicker *pickerView = [[UIDatePicker alloc] init];
pickerView.datePickerMode = UIDatePickerModeTime;
[menu addSubview:pickerView];
[menu showInView:_mainView];        

CGRect menuRect = menu.frame;
CGFloat orgHeight = menuRect.size.height;
menuRect.origin.y -= 214; //height of picker
menuRect.size.height = orgHeight+214;
menu.frame = menuRect;


CGRect pickerRect = pickerView.frame;
pickerRect.origin.y = orgHeight;
pickerView.frame = pickerRect;

[pickerView release];
[menu release];  

Answer 4

This works for me

NSString *title = UIDeviceOrientationIsLandscape([UIDevice currentDevice].orientation) ? @"\n\n\n\n\n\n\n\n\n" : @"\n\n\n\n\n\n\n\n\n\n\n\n" ;
UIActionSheet *actionSheet = [[UIActionSheet alloc] 
                              initWithTitle:[NSString stringWithFormat:@"%@%@", title, NSLocalizedString(@"SelectADateKey", @"")]
                              delegate:self cancelButtonTitle:nil destructiveButtonTitle:nil otherButtonTitles:@"Ok", nil];
[actionSheet showInView:self.view];
UIDatePicker *datePicker = [[[UIDatePicker alloc] init] autorelease];
datePicker.datePickerMode = UIDatePickerModeDate;
[actionSheet addSubview:datePicker];

a little tricky but it works!

Answer 5

Buttons at top, picker at bottom:

 UIActionSheet *menu = [[UIActionSheet alloc] initWithTitle:@"Date Picker" 
                                                  delegate:self
                                         cancelButtonTitle:@"Cancel"
                                    destructiveButtonTitle:nil
                                         otherButtonTitles:@"OK",nil];    
// Add the picker
UIDatePicker *pickerView = [[UIDatePicker alloc] init];
pickerView.datePickerMode = UIDatePickerModeTime;
[menu addSubview:pickerView];
[menu showInView:_mainView];        

CGRect menuRect = menu.frame;
menuRect.origin.y -= 214;
menuRect.size.height = 300;
menu.frame = menuRect;


CGRect pickerRect = pickerView.frame;
pickerRect.origin.y = 174;
pickerView.frame = pickerRect;

[pickerView release];
[menu release];  

Answer 6

Make sure you show the UIActionSheet in the right view when inside a UITabBarController to avoid interactivity problems at the bottom:

[actionSheet showInView:self.parentViewController.tabBarController.view];

Answer 7

Possibly not directly answering the specific question (how to get the UIDatePicker to fit), but for an implementation of UIActionSheet which presents a UIDatePicker (also others) please see ActionSheetPicker. From it's Readme:

Easily present an ActionSheet with a PickerView, allowing user to select from a number of immutable options. Based on the HTML drop-down alternative found in mobilesafari.

Also:

Some code derived from marcio's post on Stack Overflow [ Add UIPickerView & a Button in Action sheet - How? ]

Even if one doesn't use the code, it's good reading before you roll your own.

---

Update:

This version is deprecated: use ActionSheetPicker-3.0 instead.