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.

Solution 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.

Solution 2

Very simple, in ViewController.h put the UITextFieldDelegate after in viewDidLoad.

txtFecha.delegate = self;

datePicker = [[UIDatePicker alloc]init];
[datePicker setDatePickerMode:UIDatePickerModeDate];

self.txtFecha.inputView = datePicker;

Solution 3

In viewDidLoad of ViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];

    UIDatePicker *datePicker = [[UIDatePicker alloc]init];
    [datePicker setDate:[NSDate date]];
    datePicker.datePickerMode = UIDatePickerModeDate;
    [datePicker addTarget:self action:@selector(dateTextField:) forControlEvents:UIControlEventValueChanged];
    [txtFieldBranchYear setInputView:datePicker];
}

Add one method in your ViewController

-(void) dateTextField:(id)sender
{
    UIDatePicker *picker = (UIDatePicker*)txtFieldBranchYear.inputView;
    [picker setMaximumDate:[NSDate date]];
    NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];
    NSDate *eventDate = picker.date;
    [dateFormat setDateFormat:@"dd/MM/yyyy"];

    NSString *dateString = [dateFormat stringFromDate:eventDate];
    txtFieldBranchYear.text = [NSString stringWithFormat:@"%@",dateString];
}

txtFieldBranchYear is an outlet of UITextField

Solution 4

There's a really useful class I found - the blog post is here: http://www.pietrorea.com/2012/07/how-to-hide-the-cursor-in-a-uitextfield/ but it basically uses the inputView/inputAccessory view as well. The kicker is that the UILabel, at least for what I was doing, was exactly what I needed.

View more solutions