Display datepicker on tapping on textfield

Question

How can I display a datetimepicker control on tap of a textbox?

I have a user interface that has arrival and departure text fields, and when a user clicks on arrival textbox it should bring up a datetimepicker control up instead of a keyboard and the same with the departure textbox.

Answer 1

You can use inputView and inputAccessoryView properties of the text field for this. Create the date picker and set it to the input views of the two text fields. Also create another view for the Done button and it as their accessory view. You will need that button to dismiss the input view.

The Done button must be wired up to function which basically does this –

if ( [textField1 isFirstResponder] ) {
    [textField1 resignFirstResponder];
} else if ( [textField2 isFirstResponder] ) {
    [textField2 resignFirstResponder];
}

Another option would be to subclass UITextField and override inputView and inputAccessoryView. This is the way to go when there are loads of them.

Example

@interface CustomKeyboardAppDelegate : NSObject <UIApplicationDelegate> {
...

@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITextField *textField;
@property (nonatomic, retain) IBOutlet UIToolbar *accessoryView;
@property (nonatomic, retain) IBOutlet UIDatePicker *customInput;

- (IBAction)dateChanged:(id)sender;
- (IBAction)doneEditing:(id)sender;
@end

In the XIB, Pull out a UIToolbar and a UIDatePicker but don't attach it to the view. Connect the outlets appropriately. dateChanged: responds to changes in the date picker and doneEditing: is called when the Done button in the tool bar is clicked. Connect them too. The methods are implemented as listed below.

@implementation CustomKeyboardAppDelegate

@synthesize window=_window;
@synthesize textField = _textField;
@synthesize accessoryView = _accessoryView;
@synthesize customInput = _customInput;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.textField.inputView = self.customInput;
    self.textField.inputAccessoryView = self.accessoryView;
    ...    
}

...

- (IBAction)dateChanged:(id)sender {
    UIDatePicker *picker = (UIDatePicker *)sender;

    self.textField.text = [NSString stringWithFormat:@"%@", picker.date];
}

- (IBAction)doneEditing:(id)sender {
    [self.textField resignFirstResponder];
}
@end

The last two methods will bloat up as more text fields depend on this picker.