Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Popup/modal picker for a text field in iOS 7

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?

like image 278
ChuckKelly Avatar asked Dec 07 '13 05:12

ChuckKelly


2 Answers

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];
}
like image 158
rdelmar Avatar answered Oct 21 '22 12:10

rdelmar


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

Date chooser

animation

like image 16
Lawrence Kesteloot Avatar answered Oct 21 '22 14:10

Lawrence Kesteloot