iPhone: Adding a Done button within a pop up DatePicker frame

Question

I pop up a DatePicker with the following. Now I'm trying to add a Done button at the top of the pop up frame.

-(IBAction) contactBDayDatePicker{

NSLog(@"contactBDayDatePicker");

pickerView = [[UIDatePicker alloc] init];
pickerView.datePickerMode = UIDatePickerModeDate;

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

    NSLog(@"screenRect %@",NSStringFromCGRect(screenRect));

    CGSize pickerSize = [self.pickerView sizeThatFits:CGSizeZero];

    NSLog(@"pickerSize %@",NSStringFromCGSize(pickerSize));

    CGRect startRect = CGRectMake(0.0,
                                  screenRect.origin.y + screenRect.size.height,
                                  pickerSize.width, pickerSize.height);
    self.pickerView.frame = startRect;

    NSLog(@"pickerView.frame %@",NSStringFromCGRect(startRect));

    // compute the end frame
    CGRect pickerRect = CGRectMake(0.0,
                                   screenRect.origin.y + screenRect.size.height - pickerSize.height,
                                   pickerSize.width,
                                   pickerSize.height+10);

    NSLog(@"pickerRect %@",NSStringFromCGRect(pickerRect));

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

    [UIView commitAnimations];

}

 } 

I have tried increasing the frame size by 10 points (see CGSize pickerSize above) and thought I could use something like the following, but the button refuses to display, plus I'm not sure how to place the button inside the pickerSize frame itself. (BTW) The DatePicker and Button are overlaying a scrollView if that matters.

  UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
  [button setTitle:@"Done" forState:UIControlStateNormal];
  button.center = CGPointMake(160,240);
  [button addTarget:self action:@selector(done)    forControlEvents:(UIControlEventTouchUpInside)];
  [self.view addSubview:button];

Any thoughts are appreciated.

Answer 1

I've done basically the exact same thing. I subclassed UIView. It animates up and everything. Here's some code for you:

#import <UIKit/UIKit.h>

#define MyDateTimePickerHeight 260

@interface MyDateTimePicker : UIView {
}

@property (nonatomic, assign, readonly) UIDatePicker *picker;

- (void) setMode: (UIDatePickerMode) mode;
- (void) setHidden: (BOOL) hidden animated: (BOOL) animated;
- (void) addTargetForDoneButton: (id) target action: (SEL) action;

@end


#define MyDateTimePickerPickerHeight 216
#define MyDateTimePickerToolbarHeight 44

@interface MyDateTimePicker() 

@property (nonatomic, assign, readwrite) UIDatePicker *picker;
@property (nonatomic, assign) CGRect originalFrame;

@property (nonatomic, assign) id doneTarget;
@property (nonatomic, assign) SEL doneSelector;

- (void) donePressed;

@end


@implementation MyDateTimePicker

@synthesize picker = _picker;
@synthesize originalFrame = _originalFrame;

@synthesize doneTarget = _doneTarget;
@synthesize doneSelector = _doneSelector;

- (id) initWithFrame: (CGRect) frame {
    if ((self = [super initWithFrame: frame])) {
        self.originalFrame = frame;
        self.backgroundColor = [UIColor clearColor];

        CGFloat width = self.bounds.size.width;
        UIDatePicker *picker = [[[UIDatePicker alloc] initWithFrame: CGRectMake(0, 0, width, MyDateTimePickerPickerHeight)] autorelease];
        [self addSubview: picker];

        UIToolbar *toolbar = [[[UIToolbar alloc] initWithFrame: CGRectMake(0, MyDateTimePickerPickerHeight, width, MyDateTimePickerToolbarHeight)] autorelease];
        toolbar.barStyle = UIBarStyleBlackOpaque;

        UIBarButtonItem *doneButton = [[[UIBarButtonItem alloc] initWithTitle: @"Done" style: UIBarButtonItemStyleBordered target: self action: @selector(donePressed)] autorelease];
        doneButton.width = width - 20;
        toolbar.items = [NSArray arrayWithObject: doneButton];
        [self addSubview: toolbar];

        self.picker = picker;
    }
    return self;
}

- (void)dealloc {
    [super dealloc];
}

- (void) setMode: (UIDatePickerMode) mode {
    self.picker.datePickerMode = mode;
}

- (void) donePressed {
    if (self.doneTarget) {
        [self.doneTarget performSelector: self.doneSelector];
    }
}

- (void) addTargetForDoneButton: (id) target action: (SEL) action {
    self.doneTarget = target;
    self.doneSelector = action;
}

- (void) setHidden: (BOOL) hidden animated: (BOOL) animated {
    CGRect newFrame = self.originalFrame;
    newFrame.origin.y += hidden ? MyDateTimePickerHeight : 0;
    if (animated) {
        [UIView beginAnimations: @"animateDateTimePicker" context: nil];
        [UIView setAnimationDuration: MyConstantsElementAnimationLength];
        [UIView setAnimationCurve: UIViewAnimationCurveEaseOut];

        self.frame = newFrame;      

        [UIView commitAnimations]; 
    } else {
        self.frame = newFrame;      
    }
}

@end

Answer 2

I customize Micah's class to support multiple orientation and ARC

DateTimePicker.h

    @interface DateTimePicker : UIView {
}

@property (nonatomic, assign, readonly) UIDatePicker *picker;

- (void) setMode: (UIDatePickerMode) mode;
- (void) addTargetForDoneButton: (id) target action: (SEL) action;

@end

DateTimePicker.m

#define MyDateTimePickerToolbarHeight 40

@interface DateTimePicker()

@property (nonatomic, assign, readwrite) UIDatePicker *picker;

@property (nonatomic, assign) id doneTarget;
@property (nonatomic, assign) SEL doneSelector;

- (void) donePressed;

@end


@implementation DateTimePicker

@synthesize picker = _picker;

@synthesize doneTarget = _doneTarget;
@synthesize doneSelector = _doneSelector;

- (id) initWithFrame: (CGRect) frame {
    if ((self = [super initWithFrame: frame])) {
        self.backgroundColor = [UIColor clearColor];

        UIDatePicker *picker = [[UIDatePicker alloc] initWithFrame: CGRectMake(0, MyDateTimePickerToolbarHeight, frame.size.width, frame.size.height - MyDateTimePickerToolbarHeight)];
        [self addSubview: picker];

        UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame: CGRectMake(0, 0, frame.size.width, MyDateTimePickerToolbarHeight)];
        toolbar.barStyle = UIBarStyleBlackOpaque;
        toolbar.autoresizingMask = UIViewAutoresizingFlexibleWidth;

        UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithTitle: @"Done" style: UIBarButtonItemStyleBordered target: self action: @selector(donePressed)];
        UIBarButtonItem* flexibleSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
        toolbar.items = [NSArray arrayWithObjects:flexibleSpace, doneButton, nil];

        [self addSubview: toolbar];

        self.picker = picker;
        picker.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin;

        self.autoresizesSubviews = YES;
        self.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight|UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleBottomMargin;
    }
    return self;
}

- (void) setMode: (UIDatePickerMode) mode {
    self.picker.datePickerMode = mode;
}

- (void) donePressed {
    if (self.doneTarget) {
        [self.doneTarget performSelector:self.doneSelector withObject:nil afterDelay:0];
    }
}

- (void) addTargetForDoneButton: (id) target action: (SEL) action {
    self.doneTarget = target;
    self.doneSelector = action;
}

Using custom view in your view controller:

NSDate *selectedDate;  
UIButton *button;

- (void)viewDidLoad
{
    [super viewDidLoad];
    selectedDate = [NSDate new];

    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    dateFormatter.dateFormat = @"MM/dd/yyyy";

    button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button addTarget:self
               action:@selector(buttonPressed:)
     forControlEvents:UIControlEventTouchDown];
    [button setTitle:[dateFormatter stringFromDate:selectedDate] forState:UIControlStateNormal];
    button.frame = CGRectMake(100, 50, 100, 40.0);
    [self.view addSubview:button];

    CGRect screenRect = [[UIScreen mainScreen] bounds];
    CGFloat screenWidth = screenRect.size.width;
    CGFloat screenHeight = screenRect.size.height;
    picker = [[DateTimePicker alloc] initWithFrame:CGRectMake(0, screenHeight/2 - 35, screenWidth, screenHeight/2 + 35)];
    [picker addTargetForDoneButton:self action:@selector(donePressed)];
    [self.view addSubview:picker];
    picker.hidden = YES;
    [picker setMode:UIDatePickerModeDate];
    [picker addTarget:self action:@selector(pickerChanged) forControlEvents:UIControlEventValueChanged];
}

-(void)pickerChanged {  
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    dateFormatter.dateFormat = @"MM/dd/yyyy";

    selectedDate = picker.date;
    [button setTitle:[dateFormatter stringFromDate:selectedDate] forState:UIControlStateNormal];
}    

-(void)donePressed {
    picker.hidden = YES;
}

-(void)buttonPressed:(id)sender {
    picker.hidden = NO;
    [picker setDate:selectedDate]; 
}