IOS Date Picker Like A Popup Keyboard Functionality? - ios

Question

Considering a data entry form (scrollable view) that has 8 text field entries and 4 date field entries, Is it possible to present a date-picker at the bottom where normally (and how normally a keyboard would pop up), depending on which text field the user tapped into?
I suppose you can present a date picker modally with code, but it seems presenting a date-picker the same way a keyboard is called and presented would be a built in to the SDK or am I missing something? (set an attribute in the nib editor to tell the view that this text field accepts a date, and to give you a date picker option in addition to the variety of keyboards)
It blows my mind why developers don't have a simple way to "pop-up" a calendar or date picker when a declared date field gets the focus.
Any example apps or tutorials that you know of you can point me towards?

Answer 1

I just researched this same question, and while the web is replete with 3rd party libraries and tricky hacks, there's actually a pretty simple, and probably preferred way of accomplishing what you're after.
First of, it leverages the capabilities offered by the UITextField inputView and input accessoryView properties, which together offer endless customization possibilities. The problem for me became knowing how to structure things to get exactly what I wanted. I suggest reading about them here:
https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/InputViews/InputViews.html
As such, I started by declaring two properties:
#property (nonatomic, strong) UIDatePicker *datePicker;
#property (nonatomic, strong) UIView *datePickerToolbar;
and then created each of them with something like the following:
- (UIView*)datePickerToolbar {
if (!_datePickerToolbar) {
UIToolbar *toolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
toolbar.barStyle = UIBarStyleBlack;
UIBarButtonItem *cancelButton = [[UIBarButtonItem alloc] initWithTitle:#"Cancel" style:UIBarButtonItemStylePlain target:self action:#selector(datePickerCanceled:)];
UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithTitle:#"Done" style:UIBarButtonItemStyleDone target:self action:#selector(datePickerDone:)];
UIBarButtonItem *space = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil];
[toolbar setItems:[NSArray arrayWithObjects:cancelButton, space, doneButton, nil] animated:NO];
_datePickerToolbar = toolbar;
}
return _datePickerToolbar;
}
- (UIDatePicker*)datePicker {
if (!_datePicker) {
UIDatePicker *datePicker = [[UIDatePicker alloc] init];
datePicker.datePickerMode = UIDatePickerModeDate;
datePicker.date = [NSDate date];
_datePicker = datePicker;
}
return _datePicker;
}
And of course, you can customize these views to suit your needs. Since these views are your own, however, you'll also need to decide how each button in the toolbar should handle interaction. While both should dismiss the "keyboard" (which is done by resigning first responder), in my case I also wanted the Done button to set the date input field to a formatted string of the selected date:
- (void)datePickerCanceled:(id)sender {
// just resign focus and dismiss date picker
[self.dateOfBirthField resignFirstResponder];
}
- (void)datePickerDone:(id)sender {
NSDate *selectedDate = self.datePicker.date;
// format date into string
NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setDateStyle:NSDateFormatterMediumStyle];
[dateFormatter setTimeStyle:NSDateFormatterNoStyle];
// format overall string
NSString *dateString = [dateFormatter stringFromDate:selectedDate];
self.dateInputField.text = dateString;
[self.dateOfBirthField resignFirstResponder];
}
After that, the only thing left to do to trigger our keyboard replacement is to assign our custom views to those properties UITextField properties I mentioned earlier, which I chose to do in 'ViewDidLoad`:
- (void)viewDidLoad {
[super viewDidLoad];
self.dateInputField.inputView = self.datePicker;
self.dateInputField.inputAccessoryView = self.datePickerToolbar;
}
I hope this is what you were looking for. After seeing everything out there, I'm convinced that this is the simplest, most manageable way to do it. I also like this approach because it can be modified and repurposed easy enough for different input requirements.
A hidden gem, in my opinion.