Apoorv Blog

User datepicker as input to UITextfield in Swift

Updated on:



Click here to see tutorial on How to add toolbar to datepicker

Screenshot Tutorial

1. First let’s setup the XCode project as usual. Create new single view application X code project. Set project name to datepicker textfield and save it to the desktop.

Set project name

2. Go to main storyboard and add textfield in the view controller.

add textfield

3. Select textfield and set its constraints to 150 from top, 50 from leading and 50 from trailing. Uncheck constraint to margins.

set constraints textfield

4. Select textfield and set its text alignment to center.

set text alignment center

5. Open assistant editor and create outlet for textfield called dateTextField.

textfield outlet

6. Just below the outlet create lazily initilized datepicker. Set its date picker mode to just date and no time. Also when datepicker’s value changes then execute datePickerChanged function.

13
14
15
16
17
18
19
20
21
22
23
24
    @IBOutlet weak var dateTextField: UITextField!
    
    lazy var datePicker: UIDatePicker = {
        
        let picker = UIDatePicker()
        
        picker.datePickerMode = .date
        
        picker.addTarget(self, action: #selector(datePickerChanged(_:)), for: .valueChanged)
        
        return picker
    }()

7. Just below the datepicker create lazily initialized dateformatter. Set its date style to medium and time style to none.

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
        return picker
    }()
    
    lazy var dateFormatter: DateFormatter = {
        
        let formatter = DateFormatter()
        
        formatter.dateStyle = .medium
        
        formatter.timeStyle = .none
        
        return formatter
    }()
    
    override func viewDidLoad() {

8. In view did load set textfield’s input to datepicker.

37
38
39
40
41
42
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        dateTextField.inputView = datePicker
    }

9. Just below view did load create a method you mentioned in the datepicker. In the method update textfield text to string from date formatter with date from datepicker.

37
38
39
40
41
42
43
44
45
46
47
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        dateTextField.inputView = datePicker
    }
    
    @objc func datePickerChanged(_ sender: UIDatePicker) {
        
        dateTextField.text = dateFormatter.string(from: sender.date)
    }

10. Just below picker changed function override touches began. So you can stop editing textfield when touched outside textfield.

44
45
46
47
48
49
50
51
52
    @objc func datePickerChanged(_ sender: UIDatePicker) {
        
        dateTextField.text = dateFormatter.string(from: sender.date)
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        
        view.endEditing(true)
    }

10. Finally build and run on iPhone XR.

demo datepicker textfield

comments powered by Disqus