Make a date picker appear when a user taps a text field

Question

Im trying to follow this post Display datepicker on tapping on textfield and when I get to the point where it says "In the XIB, Pull out a UIToolbar and a UIDatePicker but don't attach it to the view" i get lost. Im using storyboards and he's using xib's. Is that the problem? xib's aren't an option for me. So is there a way to drag a date picker out, but not attach to the view?

Answer 1

The difference with storyboard is that you would use a XIB file (also called NIB) for each view. But you should be able to follow any instructions.

In the XIB, Pull out a UIToolbar and a UIDatePicker but don't attach it to the view.

I believe he means not to connect to the ViewController like you would do with a button (IBAction for example)

Since you are showing when you tap the textfield then you have to do it programmatically.

You don't need to add it to your view really.

Answer 2

You can create a viewcontroller that has a date picker at the bottom and a close button at the top. When tapping the textfield you can just present that viewcontroller modally.

Set delegate methods to the viewcontroller for: closeButtonClicked: , and dateSelected: , and implemet these delegate merhod in the main controller.

In addition, you can "block" the screen by adding the datePicker's viewcontroller background color with certain alpha for a nice affect.

I found that to be the easiest way to do that. No need for a nib

Answer 3

May be it will helpful to you..

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
        dateActionSheet = [[UIActionSheet alloc]initWithTitle:@"Select Your Date of Birth" delegate:self cancelButtonTitle:nil destructiveButtonTitle:nil otherButtonTitles:nil  , nil];
            dateActionSheet.actionSheetStyle = UIActionSheetStyleBlackOpaque;

            UIDatePicker *datePicker = [[UIDatePicker alloc] init];
            datePicker.datePickerMode = UIDatePickerModeDate;
            [datePicker addTarget:self action:@selector(datePickerValueChangedd:) forControlEvents:UIControlEventValueChanged ];
            NSDateFormatter *df = [[NSDateFormatter alloc] init];
            df.dateStyle = NSDateFormatterMediumStyle;

            [dateActionSheet addSubview:datePicker];
            [dateActionSheet addSubview:self.datePickerView];

            UIToolbar *tools=[[UIToolbar alloc]initWithFrame:CGRectMake(0, 0,320,40)];
            tools.barStyle=UIBarStyleBlackOpaque;
            [dateActionSheet addSubview:tools];


            UIBarButtonItem *doneButton=[[UIBarButtonItem alloc]initWithTitle:@"Done" style:UIBarButtonItemStyleBordered target:self action:@selector(btnActinDoneClicked)];
            doneButton.imageInsets=UIEdgeInsetsMake(200, 6, 50, 25);


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

            NSArray *array = [[NSArray alloc]initWithObjects:flexSpace,flexSpace,doneButton,nil];

            [tools setItems:array];



            //picker title
            UILabel *lblPickerTitle=[[UILabel alloc]initWithFrame:CGRectMake(60,8, 200, 25)];
            lblPickerTitle.text=@"Select Date of Birth";
            lblPickerTitle.backgroundColor=[UIColor clearColor];
            lblPickerTitle.textColor=[UIColor whiteColor];
            lblPickerTitle.textAlignment = NSTextAlignmentCenter;
            lblPickerTitle.font=[UIFont boldSystemFontOfSize:15];
            [tools addSubview:lblPickerTitle];


            //cell.detailTextLabel.text = [self datePickerValueChangedd:datePicker];

            [dateActionSheet showFromRect:CGRectMake(0,480, 320,215) inView:self.view animated:YES];
            [dateActionSheet setBounds:CGRectMake(0,0, 320, 411)];
        }

    -(void)btnActinDoneClicked {
        [dateActionSheet dismissWithClickedButtonIndex:1 animated:YES];
        [dateActionSheet removeFromSuperview];

    }

    -(void)datePickerValueChangedd:(UIDatePicker*) datePicker
    { 
        Youytextfield.text = (NSString *)datePicker.date;
    }