Add a UIButton to UIDatePicker

Question

I have a UITextField that I set the inputView to a UIDatePicker so that when the UITextField is pressed, instead of a keyboard, a UIDatePicker pops up. I would like to also add a toolbar with a 'Next' button on it so that the user could easily jump to the next field, but I am not sure how to do this as I am already altering a view on the UITextField to get the UIDatePicker. Here is the code used in loading the view:

- (void)viewDidLoad
{
self.datePicker = [[UIDatePicker alloc] init];
self.datePicker.datePickerMode = UIDatePickerModeDate;
[self.datePicker addTarget:self action:@selector(datePickerValueChanged) forControlEvents:UIControlEventValueChanged];
issue.inputView = self.datePicker;
}

Suggestions for getting the 'Next' button added to a toolbar on top of it?

You can checkout this answer, it has the code for attaching a toolbar on top of a UIDatePicker, you can further customize as per your needs http://stackoverflow.com/questions/4824043/uidatepicker-pop-up-after-uibutton-is-pressed/4824319#4824319 — Dhruv Goel, Jan 30 '13 at 19:47

score 4 · Accepted Answer · answered Jan 30 '13 at 19:45

4

Create a view to use as the text field's inputAccessoryView. This view should contain your buttons (e.g. Next, Cancel, Previous).

answered Jan 30 '13 at 19:45

rmaddy

314,917
42
532
579

3

Ok, I added `UIToolbar *pickerToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 22)]; pickerToolbar.barStyle=UIBarStyleBlackOpaque; [pickerToolbar sizeToFit]; NSMutableArray *barItems = [[NSMutableArray alloc] init]; UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithTitle:@"Next" style:UIBarButtonItemStyleBordered target:self action:@selector(expirenext)]; [barItems addObject:flexSpace]; [pickerToolbar setItems:barItems animated:YES]; expire.inputAccessoryView = pickerToolbar;` and it worked! How would I align button to right? – user717452 Jan 30 '13 at 19:50
That's too hard to read. Update your question with the code. If you have a new question on new code, you should ask a new question. – rmaddy Jan 30 '13 at 19:56

score 3 · Answer 2 · answered Jan 30 '13 at 19:56

Here's the code :

if (keyboardToolbar == nil) {
keyboardToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, 44)];
[keyboardToolbar setBarStyle:UIBarStyleBlackTranslucent];

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

UIBarButtonItem *next = [[UIBarButtonItem alloc] initWithTitle:@"Next" style:UIBarButtonItemStyleDone target:self action:@selector(switchToNextField:)];

[keyboardToolbar setItems:[[NSArray alloc] initWithObjects: extraSpace, next, nil]];
}

issue.inputAccessoryView = keyboardToolbar;

datePicker = [[UIDatePicker alloc] init];
datePicker.datePickerMode = UIDatePickerModeDate;
[datePicker addTarget:self action:@selector(datePickerValueChanged:) forControlEvents:UIControlEventValueChanged];

issue.inputView = datePicker;

And in your switchToNextField method, just make the nextField as the firstResponder using [nextTextField becomeFirstResponder];

score 0 · Answer 3 · answered Jan 30 '13 at 19:57

You can create a view then put any UI elements inside of it.

@property (nonatomic,strong) UIPopoverController *popoverControllerBirthday;

add above to your .h file and sync it at .m @synthesize popoverControllerBirthday;

also change your @synthesize datePicker; to @synthesize datePicker=_datePicker;

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField{

    if (textField==self.yourtextfield) {
        UIViewController* popoverContent = [[UIViewController alloc] init]; //ViewController

        UIView *popoverView = [[UIView alloc] init];   //view
        popoverView.backgroundColor = [UIColor blackColor];

        _datePicker=[[UIDatePicker alloc]init];//Date picker
        _datePicker.frame=CGRectMake(0,0,320, 216);
        _datePicker.datePickerMode = UIDatePickerModeDate;
        [_datePicker setMinuteInterval:5];
        [_datePicker setTag:10];
        [popoverView addSubview:_datePicker];



        UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [button addTarget:self
                   action:@selector(result)
         forControlEvents:UIControlEventTouchUpInside];
        [button setTitle:@"Next" forState:UIControlStateNormal];
        button.frame = CGRectMake(0, 220, 320, 45);
        UIColor *titleColor = [UIColor whiteColor];
        [button setTitleColor:titleColor forState:UIControlStateNormal];
       // UIImage *doneButtonImage = [UIImage imageNamed:@"create event button.png"]; choose a button background if you ahve one
        [button setBackgroundImage:doneButtonImage forState:UIControlStateNormal];
        [popoverView addSubview:button];


        popoverContent.view = popoverView;
        popoverControllerBirthday = [[UIPopoverController alloc] initWithContentViewController:popoverContent];
        popoverControllerBirthday.delegate=self;

        CGRect myFrame =textField.frame;
        myFrame.origin.x = 200;// your coordinates change it as you wish
        myFrame.origin.y = 195;

        [popoverControllerBirthday setPopoverContentSize:CGSizeMake(320, 265) animated:NO];
        [popoverControllerBirthday presentPopoverFromRect:myFrame inView:self.view permittedArrowDirections:UIPopoverArrowDirectionUp animated:YES];

        return NO; // tells the textfield not to start its own editing process (ie show the keyboard)
    }
    else{
         return YES;
    }

}
//handle your result call next uitextfield in your case
-(void) result 
{
    //in result method you can get date using datepicker.date
    if (self.popoverControllerBirthday)
         {
             [self.popoverControllerBirthday dismissPopoverAnimated:NO];
              self.popoverControllerBirthday = nil;
    }

    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    [dateFormatter setTimeStyle:NSDateFormatterNoStyle];
    [dateFormatter  setDateFormat:@"M d yyyy"];
    NSString *parseDatePickerDAte =[dateFormatter stringFromDate:_datePicker.date]; // your string that is choosen at datepicker
   // self.textfield.text = parseDatePickerDAte ; set this to your textfield if you want

   //google this dont remember exact code for that, just changing your textfield to desired one
   [self.nexttextfield becomesFirstResponder];



}

score 0 · Answer 4 · answered May 17 '15 at 12:15

0

You can use SMDatePicker instead of UIDatePicker. It will create a custom view with UIToolbar and UIDatePicker. You can easy customise toolbar with necessary buttons. Take a look at example project.

answered May 17 '15 at 12:15

anatoliy_v

1,782
15
24

Add a UIButton to UIDatePicker

4 Answers4