Popup/modal picker for a text field in iOS 7

Question

I am having a lot of trouble figuring out how to implement a standard popup picker. Like many apps' registration screen when a user selects the birthday text field I'd like a popup picker to appear so that users can select their birthday, click done and the formatted date will be added to the text field. This doesn't seem like it should be all that hard, yet it seems there is no simple, clear, standard way of doing this in iOS 7.

I've searched the internet and seen some saying to use modals, others say actionsheets, others say popups and still others say a separate view controller.

Can anyone tell me what the standard way of doing this is or a snippet on how to implement it?

rdelmar · Accepted Answer · 2013-12-07T20:34:17.037

76

I think the "standard" way, is to set the picker as the inputView of the text field.

UIPickerView *picker = [[UIPickerView alloc] init];
self.textField.inputView = picker;

It will pop up front the bottom, just like the keyboard does when you touch in the text field.

Here's a simple implementation of how to use a picker as an input view:

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UITextField *tf;
@property (strong,nonatomic) NSArray *theData;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIPickerView *picker = [[UIPickerView alloc] init];
    picker.dataSource = self;
    picker.delegate = self;
    self.tf.inputView = picker;
    self.theData = @[@"one",@"two",@"three",@"four"];
}

-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component {
    return self.theData.count;
}

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView {
    return  1;
}

-(NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component {
    return self.theData[row];
}

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component {
    self.tf.text = self.theData[row];
    [self.tf resignFirstResponder];
}

edited Dec 07 '13 at 20:34

answered Dec 07 '13 at 06:16

rdelmar

103,982
12
207
218

1

this helped , but what about dismissing it? as in a done button which causes the datepicker to go away, wouldnt this be considered a pretty standard piece of something like this? I hope i dont come off as ungreateful, uve been more helpful than anything else ive found im just frustrated by the lack of resources on this stuff after coming from android where tuts dont depreciate every single year. – ChuckKelly Dec 07 '13 at 20:28
@ChuckKelly, you can just have the text field resign first responder in the didSelectRow method. I've added that to my answer. – rdelmar Dec 07 '13 at 20:35
thank you so much, i accepted ur answer, but 1 last little thing. being this view thats poping up isnt part of my storyboard how exactly would i add a done button if i wanted ( which i now know id add self.tf resignFirstResponder too) I ask bc it might be a little annoying to some that if you simply scroll the picker down it selects whatever it lands on and closes and thats not exactly the same as picking a value. – ChuckKelly Dec 07 '13 at 21:45
@ChuckKelly, There is no way to customize the appearance of a picker view. You could add a done button next to your text field instead, and put the code there (or after selecting a value, you could add a done button in code just above the picker). BTW, you didn't accept my answer, you up voted it. You need to click the large hollow arrow to accept an answer. – rdelmar Dec 07 '13 at 21:57
foursquare does it as well as others, ik its possible, but you've done enough for me. ill try to fig it out from here. – ChuckKelly Dec 07 '13 at 22:03
@ChuckKelly, Apple's docs say you can't do it, so either they're rolling their own, or presenting a custom view that contains a picker view and a button together. – rdelmar Dec 07 '13 at 22:06
5

You can construct a `UIToolbar` and set it as the `inputAccessoryView` of the text field. – dokkaebi Feb 19 '14 at 20:27
This is definitely the right approach, I think. I just shared a similar suggestion here: http://stackoverflow.com/a/25100066/1152966 – metatheoretic Aug 02 '14 at 22:54

score 16 · Answer 2 · edited Apr 11 '15 at 18:04

16

The ActionSheetPicker-3.0 library seems to do this pretty well.

Date chooser

animation

edited Apr 11 '15 at 18:04

skywinder

21,291
15
93
123

answered Aug 21 '14 at 20:15

Lawrence Kesteloot

4,149
2
31
28

I can't get this to build from a current git clone. Xcode 7.2.1 gives me: dyld`dyld_fatal_error: -> 0x120055088 <+0>: brk #0x3 – Chris Prince Mar 25 '16 at 17:37

Popup/modal picker for a text field in iOS 7

2 Answers2

Linked