iPhone display date picker on UITextField touch

Question

I followed this thread: datepicker by clicking on textfield

I imported both of the following protocols:

@interface ViewController : UIViewController&         


        

Answer 1

Adding Date Picker to UITextField as Input View - Swift Code. Hope it helps everyone. :)

func addTimePickerToTimeTextFieldView() {

    timePicker = UIDatePicker()
    timePicker?.datePickerMode = .time
    timeTextField.inputView = timePicker

    timePicker?.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    timePicker?.setValue(#colorLiteral(red: 0.03921568627, green: 0.2352941176, blue: 0.3647058824, alpha: 1), forKeyPath: "textColor")

    timePicker?.addTarget(self, action: #selector(timeSelectedByUser(_:)), for: .valueChanged)

    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(viewTapped(_:)))
    view.addGestureRecognizer(tapGesture)

}

@objc func timeSelectedByUser(_ sender: UIDatePicker) {

    let formatter = DateFormatter()
    formatter.timeStyle = .short
    timeTextField.text = formatter.string(from: sender.date)

    //Convert Time for API - 24 hours format
    apiFormatter.dateFormat = "HH:mm"
    timeForApi = apiFormatter.string(from: sender.date)

}

Answer 2

Below is how I am displaying the date picker.

- (void)textFieldDidBeginEditing:(UITextField *)textField
{


    self.activeTextField = textField;

    // Create a date picker for the date field.
    UIDatePicker *datePicker = [[UIDatePicker alloc]init];
    datePicker.datePickerMode = UIDatePickerModeDate;
    datePicker.minimumDate = [NSDate dateWithTimeIntervalSinceNow:-31536000];
    [datePicker setDate:[NSDate date]];
    [datePicker addTarget:self action:@selector(updateDateField:) forControlEvents:UIControlEventValueChanged];

    // If the date field has focus, display a date picker instead of keyboard.
    // Set the text to the date currently displayed by the picker.
    if (textField.tag == 1)
    {
    self.date.inputView = datePicker;
    self.date.text = [self formatDate:datePicker.date];
    }   
}


// Called when the date picker changes.
- (void)updateDateField:(id)sender
{
    UIDatePicker *picker = (UIDatePicker*)self.date.inputView;
    self.date.text = [self formatDate:picker.date];
}


// Formats the date chosen with the date picker.
- (NSString *)formatDate:(NSDate *)date
{
    NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
    [dateFormatter setDateStyle:NSDateFormatterShortStyle];
    [dateFormatter setDateFormat:@"MM'/'dd'/'yyyy"];
    NSString *formattedDate = [dateFormatter stringFromDate:date];
    return formattedDate;
}

Answer 3

You could use the UITextField input view property. Just alloc init a regular UIDatePicker in code and assign it to the textfield's inputView. Doing this, the UIPickerView will be presented instead of the keyboard. If you need any code feel free to ask :)

EDIT: code

You fist hook up your textField with IB

@interface myViewController <UITextFieldDelegate>
@property (nonatomic,weak) IBOutlet UITextField *myTextField;
@end 

In the implementation

UIDatePicker *datePicker = [[UIDatePicker alloc]init];
[datePicker setDate:[NSDate date]];
[datePicker addTarget:self action:@selector(updateTextField:) forControlEvents:UIControlEventValueChanged];       
[self.myTextField setInputView:datePicker];

That will bring up a UIDatePicker when you tap on the textField. Note the action that I added to the datePicker.

[datePicker addTarget:self action:@selector(updateTextField:) forControlEvents:UIControlEventValueChanged];

To update the textField each time that the user scrolls in the picker, you just need to implement the updateTextField method somewhere in the viewController

-(void)updateTextField:(id)sender
{
  UIDatePicker *picker = (UIDatePicker*)self.myTextField.inputView;
  self.myTextField.text = [NSString stringWithFormat:@"%@",picker.date];
}

With this last method, every time the user rotates the picker, the textfield will update!

• You could use a NSDateFormatter to improve the output of the string.

Answer 4

Swift 4.2
You can achieve this by writing just one line of code using UITextField Extension.
Credit: http://www.swiftdevcenter.com/

import UIKit

extension UITextField {

    func setInputViewDatePicker(target: Any, selector: Selector) {
        // Create a UIDatePicker object and assign to inputView
        let screenWidth = UIScreen.main.bounds.width
        let datePicker = UIDatePicker(frame: CGRect(x: 0, y: 0, width: screenWidth, height: 216))//1
        datePicker.datePickerMode = .date //2
        self.inputView = datePicker //3

        // Create a toolbar and assign it to inputAccessoryView
        let toolBar = UIToolbar(frame: CGRect(x: 0.0, y: 0.0, width: screenWidth, height: 44.0)) //4
        let flexible = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil) //5
        let cancel = UIBarButtonItem(title: "Cancel", style: .plain, target: nil, action: #selector(tapCancel)) // 6
        let barButton = UIBarButtonItem(title: "Done", style: .plain, target: target, action: selector) //7
        toolBar.setItems([cancel, flexible, barButton], animated: false) //8
        self.inputAccessoryView = toolBar //9

    }

    @objc func tapCancel() {
        self.resignFirstResponder()
    }

}

In your UIViewController class write below code.

class ViewController: UIViewController {

    @IBOutlet weak var myTextField: UITextField!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        self.myTextField.setInputViewDatePicker(target: self, selector: #selector(tapDone(sender:datePicker1:))) //1
    }

    //2
    @objc func tapDone(sender: Any, datePicker1: UIDatePicker) {
        print(datePicker1)
        if let datePicker = self.myTextField.inputView as? UIDatePicker { // 2.1
            let dateformatter = DateFormatter() // 2.2
            dateformatter.dateStyle = .medium // 2.3
            self.myTextField.text = dateformatter.string(from: datePicker.date) //2.4
        }
        self.myTextField.resignFirstResponder() // 2.5
    }

}

For more detail visit: http://www.swiftdevcenter.com/uidatepicker-as-input-view-to-uitextfield-swift/

Answer 5

Here's what I did in Swift 4:

let datePicker = UIDatePicker()
@IBOutlet weak var myTextField: UITextField!

override func viewDidLoad() {
    super.viewDidLoad()
    setDatePicker()
}

func setDatePicker() {
    //Format Date
    datePicker.datePickerMode = .date

    //ToolBar
    let toolbar = UIToolbar();
    toolbar.sizeToFit()
    let doneButton = UIBarButtonItem(title: "Done", style: .plain, target: self, action: #selector(doneDatePicker));
    let spaceButton = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.flexibleSpace, target: nil, action: nil)
    let cancelButton = UIBarButtonItem(title: "Cancel", style: .plain, target: self, action: #selector(cancelDatePicker));

    toolbar.setItems([doneButton,spaceButton,cancelButton], animated: false)

    myTextField.inputAccessoryView = toolbar
    myTextField.inputView = datePicker
}

@objc func doneDatePicker(){
    let formatter = DateFormatter()
    formatter.dateFormat = "MM/dd/yyyy"
    myTextField.text = formatter.string(from: datePicker.date)
    self.view.endEditing(true)
}

@objc func cancelDatePicker(){
    self.view.endEditing(true)
}

Answer 6

@JRo solution works great!

Here is my updated code in Swift 3:

func textFieldDidBeginEditing(_ textField: UITextField) {
    self.activeTextField = textField

    // Create a date picker for the date field.
    let picker = UIDatePicker()
    picker.datePickerMode = .date
    picker.addTarget(self, action: #selector(updateDateField(sender:)), for: .valueChanged)

    // If the date field has focus, display a date picker instead of keyboard.
    // Set the text to the date currently displayed by the picker.
    textField.inputView = picker
    textField.text = formatDateForDisplay(date: picker.date)
}


// Called when the date picker changes.

func updateDateField(sender: UIDatePicker) {
    activeTextField?.text = formatDateForDisplay(date: sender.date)
}


// Formats the date chosen with the date picker.

fileprivate func formatDateForDisplay(date: Date) -> String {
    let formatter = DateFormatter()
    formatter.dateFormat = "dd MMM yyyy"
    return formatter.string(from: date)
}