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.

Amentia

This is a good german example. – Odum

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.

Rarefaction

I tried this approach, it looked fine, but I found that the buttons on the UIActionSheet were disabled. Any ideas? – Rather

Answer 2

Try adding following line to resolve disabled buttons issue

[menu sendSubviewToBack:pickerView];

Vessel

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];  

Checkoff

This still doesn't work for me. I suspect part of my problem is that I have a tab bar in my application. If I shift the menu.frame another 44 pixels (the height of the tab bar) the date picker works flawlessly, but there's a 44 pixel gap at the bottom of the menu. – Motherofpearl

Which view are you showing the ActionSheet in, ie. what is your _mainView? Don't show the ActionSheet in your content view, show it in the view containing the content view and the tab bar. If you use a navigation controller, you might do something like [menu showInView:self.navigationController.view]. – Checkoff

I was experiencing a not responding zone at the bottom of the screen but Placing [menu sendSubviewToBack:pickerView]; at the very end fixes everything,at least for me on iOS5 – Amanita

This answer is awesome! – Greengrocery

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!

Draughtsman

adding linebreaks in your title is just hacky, but whatever floats your boat, i guess – Leeke

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];  

Monosyllable

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];

Incorporate

Should be [actionSheet showFromTabBar:self.parentViewController.tabBarController.tabBar] – Robbins

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.

Baal