How to display DatePicker in popupwindow in iPhone?

Question

I m newbie to objective-C

I want to display the UIDatePicker in a popup window after the button click ..

I have a button and when I click the button my popup should appear with DatePicker and later after chosing the date the popup should close and set the selected date in a textbox.

How can I do this ?

To create a datepicker I wrote this code ..

UIDatePicker *datePicker=[[[UIDatePicker alloc] init] autorelease];
datePicker.datePickerMode=UIDatePickerModeDate;
[self.view addSubview:datePicker];

But I do not know how to display it in a popup window on a button click ..?

Are you looking to add it in iPhone or iPad ? – Ajay Sharma Oct 08 '12 at 12:17 — Ajay Sharma, Oct 08 '12 at 12:17

score 1 · Answer 1 · answered Oct 08 '12 at 12:02

Try this, this can help you

-(IBAction)DatePickerAction:(id)sender
{


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

    }

score 1 · Answer 2 · edited Oct 08 '12 at 12:11

you can set the .inputView property of the text field to a datepicker..

so myTextField.inputView = datePicker;

this will replace the keyboard input view for the datePicker.

Gets a little more indepth, you will need to add a target for when the value of the date picker changes (so it updates the text field)

let me know if this is how you want to go about it.

If you still want the popup window im not sure if you can subclass UIAlertView for this..

or you can add the datePicker to a UIView instance and add that onto the screen with some fancy animation, etc....

Plenty options and im happy to help you with them...

Vikas S Singh · Accepted Answer · 2012-10-09T09:18:23.870

Declaration in your .h file

UIActionSheet *aac;  
UIDatePicker *theDatePicker;

Implementation in .m file

// Add the code after your comment

-(void)DatePickerDoneClick:(id)sender {

        NSDateFormatter *df=[[[NSDateFormatter alloc]init] autorelease];
        df.dateFormat = @"MM/dd/yyyy";
        NSArray *temp=[[NSString stringWithFormat:@"%@",[df stringFromDate:theDatePicker.date]] componentsSeparatedByString:@""];

        [dateString1 release];
        dateString1=nil;
        dateString1 = [[NSString alloc]initWithString:[temp objectAtIndex:0]];
    UITextField* BirthDayTxtLBl.text = [NSString stringWithFormat:@" %@",dateString1];

NSString *theTime = [NSString stringWithFormat:@"%@",BirthDayTxtLBl.text];
        NSLog(@"%@",theTime);
        [aac dismissWithClickedButtonIndex:0 animated:YES];



        }     





- (void)DatePickercancelClick:(id)sender{

    [aac dismissWithClickedButtonIndex:0 animated:YES];
}

-(IBAction)AddTheTimePicker:(id)sendar {

    aac = [[UIActionSheet alloc] initWithTitle:[self isViewPortrait]?@"\n\n":nil  delegate:self cancelButtonTitle:nil destructiveButtonTitle:nil otherButtonTitles:nil];
    theDatePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0.0, 44.0, 0.0, 0.0)];
    theDatePicker.datePickerMode=UIDatePickerModeDateAndTime;
    UIToolbar *pickerDateToolbar = [[UIToolbar alloc] initWithFrame:[self isViewPortrait]?CGRectMake(0, 0, 320, 44):CGRectMake(0, 0, 320, 44)];
    pickerDateToolbar.barStyle = UIBarStyleBlackOpaque;
    [pickerDateToolbar sizeToFit];

    NSMutableArray *barItems = [[NSMutableArray alloc] init];

    UIBarButtonItem *doneBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(DatePickerDoneClick:)];
    //doneBtn.tag = tagID;
    [barItems addObject:doneBtn];


    UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];

    UILabel *toolBarItemlabel;
    if([self interfaceOrientation] == UIInterfaceOrientationPortraitUpsideDown || [self interfaceOrientation] == UIInterfaceOrientationPortrait)
        toolBarItemlabel= [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 180,30)];
    else
        toolBarItemlabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 200,30)];

    [toolBarItemlabel setTextAlignment:UITextAlignmentCenter];  
    [toolBarItemlabel setTextColor:[UIColor whiteColor]];   
    [toolBarItemlabel setFont:[UIFont boldSystemFontOfSize:16]];    
    [toolBarItemlabel setBackgroundColor:[UIColor clearColor]]; 
    toolBarItemlabel.text = [NSString stringWithFormat:@"Select Start Time"];

    UIBarButtonItem *buttonLabel =[[UIBarButtonItem alloc]initWithCustomView:toolBarItemlabel];
    [toolBarItemlabel release]; 
    [barItems addObject:buttonLabel];   
    [buttonLabel release];  

    [barItems addObject:flexSpace];

    UIBarButtonItem *SelectBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemCancel target:self action:@selector(DatePickercancelClick:)];
    [barItems addObject:SelectBtn];

    [pickerDateToolbar setItems:barItems animated:YES];
    [aac addSubview:pickerDateToolbar];
    [aac addSubview:theDatePicker];

    CGRect myImageRect = CGRectMake(0.0f, 300.0f, 320.0f, 175.0f);;
    [aac showFromRect:myImageRect inView:self.view animated:YES ];

    [UIView beginAnimations:nil context:nil];
    if([self interfaceOrientation] == UIInterfaceOrientationPortraitUpsideDown || [self interfaceOrientation] == UIInterfaceOrientationPortrait)
        [aac setBounds:CGRectMake(0,0,320, 464)];
    else
        [aac setBounds:CGRectMake(0,0,480, 400)];       

    [UIView commitAnimations];

}

// Add this if you wish to add support Orientation support for picker
  - (BOOL) isViewPortrait {
     UIInterfaceOrientation currentOrientation = [UIApplication sharedApplication].statusBarOrientation;
     return (currentOrientation == UIInterfaceOrientationPortrait || currentOrientation == UIInterfaceOrientationPortraitUpsideDown);
}

careful of memory leak issues! release aac after dismissing. :) happy coding — theiOSDude, Oct 08 '12 at 19:50
hey I want only Date mode and so I have changed the line as theDatePicker.datePickerMode=UIDatePickerModeDate;Now If i select a particular date suppose Oct 9 2012 then in NSLog I can see 2012-10-08 i.e 1 day less ..How can I display the exact date without time? — Honey, Oct 09 '12 at 07:39
@arizah frist changed the theDatePicker.datePickerMode=UIDatePickerModeDate; and after use the NSDateFormatter for collect the string value .. — Vikas S Singh, Oct 09 '12 at 08:23
@arizah I have edit my answer , review it , Its is working for me , i m tested the this code. .-(void)DatePickerDoneClick:(id)sender — Vikas S Singh, Oct 09 '12 at 09:06

score 0 · Answer 4 · answered Oct 08 '12 at 12:22

Write in your Button Click method

    self.DatePicker= [[UIDatePicker alloc] initWithFrame:CGRectMake(0, 0, 320, 216)];
    self.DatePicker.datePickerMode = UIDatePickerModeDate;
    [self.DatePicker addTarget:self
                   action:@selector(SetDatePickerTime:)
         forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:self.DatePicker];


- (void)SetDatePickerTime:(id)sender
{
     [self.DatePicker removeFromSuperview];
    NSDateFormatter *outputFormatter = [[NSDateFormatter alloc] init];
    [outputFormatter setDateFormat:@"dd:MM:yyyy"];


    NSLog(@"%@",[outputFormatter stringFromDate:self.DatePicker.date]);
}

score 0 · Answer 5 · answered Oct 08 '12 at 13:21

Best method will be to create animation like it..ive tried it using extension to uiview..

try the following in the .m file where you want to show popup just above the normal implementation

@interface UIView (AlertAnimation)

- (void)doPopInAnimation;

@end

const NSTimeInterval kAnimationDuration = 0.3f;

@implementation UIView (AlertAnimation)

- (void) doPopInAnimation {
    CALayer *viewLayer = self.layer;
    CAKeyframeAnimation *popInAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];

    popInAnimation.duration = 0.3f;
    popInAnimation.values = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.6], [NSNumber numberWithFloat:1.2], [NSNumber numberWithFloat:0.9], [NSNumber numberWithFloat:1], nil];
    popInAnimation.keyTimes = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:0.6], [NSNumber numberWithFloat:0.8], [NSNumber numberWithFloat:1.0], nil];    

    [viewLayer addAnimation:popInAnimation forKey:@"transform.scale"];
}

@end

further put this magical line on the event you want popup

[yourPickerView doPopInAnimation];

score 0 · Answer 6 · answered Feb 04 '13 at 11:34

Refer this code

  startDatePicker = [[UIDatePicker alloc] init];
    startDatePicker.datePickerMode = UIDatePickerModeDate;
    [startDatePicker addTarget:self action:@selector(startLabelChange:)forControlEvents:UIControlEventValueChanged];
    CGSize pickerSize = [startDatePicker sizeThatFits:CGSizeZero];
    startDatePicker.frame = CGRectMake(-40, -20, pickerSize.width, pickerSize.height);
    startDatePicker.transform = CGAffineTransformMakeScale(0.750f, 0.750f);


    UIViewController *pickerController = [[UIViewController alloc] init];
    [pickerController.view addSubview:startDatePicker];
    [startDatePicker release];
    [pickerController setContentSizeForViewInPopover:CGSizeMake(240, 180)];
    UIPopoverController *pickerPopover = [[UIPopoverController alloc] initWithContentViewController:pickerController];
    [pickerPopover presentPopoverFromRect:startDatelabel.frame
                                   inView:rightSideView
                 permittedArrowDirections:UIPopoverArrowDirectionLeft
                                 animated:YES];
    pickerPopover.delegate = self;
    self.popover = pickerPopover;
    [pickerController release];
    [pickerPopover release];

How to display DatePicker in popupwindow in iPhone?

6 Answers6