ios UITextField to edit with uidatepicker

Question

I have a uitextfield where is written a date.. how can I show on the bottom of the page a uidatepicker instead of a standard keyboard? thanks in advance

score 5 · Accepted Answer · answered Jan 19 '11 at 00:24

Make sure your class implements the UITextFieldDelegate protocol. Then, override the shouldBeginEditing delegate method to return FALSE:

- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField
{
    //check if it is the UITextField you don't want the keyboard for
    if (textField != dateTextField)
        return TRUE;

    //present your UIDatePicker
    //see instructions below

    //Return false to prevent the keyboard from appearing.
    return FALSE;
}

I recommend using another UIViewController that contains a UIDatePicker and use presentModalViewController to show it. This conforms to the User-Interface Guidelines.

there's a problem with this approach, if you only want the datepicker on the bottom of the screen, and not covering the whole screen. You can't make your modally presented view controller transparent, because the underlying views won't be there. http://stackoverflow.com/questions/849458/transparent-modal-view-on-navigation-controller — kris, Nov 06 '11 at 01:01

score 5 · Answer 2 · edited May 23 '17 at 12:10

5

UITextField provides a mechanism for this. You're supposed to be able to set another view (like a datepicker) as the inputView. See this post:

iPhone datepicker instead of keyboard?

edited May 23 '17 at 12:10

Community

1
1

answered Oct 07 '11 at 01:11

Oscar

2,039
2
29
39

score 3 · Answer 3 · answered Jul 28 '13 at 22:32

You can use the following code ;

//first of all, you have to declare the datePicker and then use the following code; 

-(void)textFieldDidBeginEditing:(UITextField *)textField
{
[dateLabel resignFirstResponder]; //the textField that you will set the selected date
datePicker = [[UIDatePicker alloc] init]; //declared uidatepicker component

pickerViewDate = [[UIActionSheet alloc] initWithTitle:@"Select the date!"
                                             delegate:self
                                    cancelButtonTitle:nil
                               destructiveButtonTitle:nil
                                    otherButtonTitles:nil];

datePicker = [[UIDatePicker alloc] initWithFrame:CGRectMake(0.0, 44.0, 0.0, 0.0)];
datePicker.datePickerMode = UIDatePickerModeDate; //set your spesific mode

NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
[dateFormatter setFormatterBehavior:NSDateFormatterBehavior10_4];
[dateFormatter setLocale:[[NSLocale alloc] initWithLocaleIdentifier:@"en_US"]]; //or another LocaleIdentifier instead of en_US
[dateFormatter setDateFormat:@"dd.MM.yyyy"]; //desired format

[datePicker addTarget:self action:@selector(dateChanged) forControlEvents:UIControlEventValueChanged]; //the function would be fired when user change the date in datePicker

//now preparing the toolbar which will be displayed at the top of the datePicker
pickerToolbar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
pickerToolbar.barStyle=UIBarStyleBlackOpaque;
[pickerToolbar sizeToFit];
NSMutableArray *barItems = [[NSMutableArray alloc] init];
UIBarButtonItem *flexSpace = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(doneButtonClicked)]; //barbutton item is "DONE" and doneButtonClicked action will be fired when user clicks the button.
[barItems addObject:flexSpace]; // set the left of the bar

[pickerToolbar setItems:barItems animated:YES];
[pickerViewDate addSubview:pickerToolbar];
[pickerViewDate addSubview:datePicker];
[pickerViewDate showInView:self.view];
[pickerViewDate setBounds:CGRectMake(0,0,320, 464)]; //you can change the position
}

and additional actions ;

-(IBAction)dateChanged{
    NSDateFormatter *FormatDate = [[NSDateFormatter alloc] init];
    [FormatDate setLocale: [[NSLocale alloc]
                         initWithLocaleIdentifier:@"en_US"]];
    [FormatDate setDateFormat:@"dd.MM.yyyy"];
    dateLabel.text = [FormatDate stringFromDate:[datePicker date]];
}

-(BOOL)closeDatePicker:(id)sender{
    [pickerViewDate dismissWithClickedButtonIndex:0 animated:YES];
    [dateLabel resignFirstResponder];
    return YES;
}

-(IBAction)doneButtonClicked{
    [self closeDatePicker:self];
}

ios UITextField to edit with uidatepicker

3 Answers3