Date and Time Picker Implementation in UITextField iOS Github

In this tutorial, we explore how to enhance user input by implementing a date and time picker directly within a UITextField.

Traditionally, handling date and time selection in iOS applications involved presenting a separate picker view or view controller.

However, by leveraging the capabilities of UITextField and combining it with the UIDatePicker, we can provide a seamless and intuitive user experience.

Throughout this tutorial, we guide you step-by-step in implementing the integration of a date and time picker with a UITextField.

You’ll learn how to customize the UITextField to display a clear indication of the expected input format and how to respond to user interactions to present the picker when the text field is tapped.

We’ll also cover techniques for formatting the selected date or time and updating the UITextField accordingly.

By implementing the date and time picker directly within the UITextField, you eliminate the need for additional screen transitions or complex UI components.

This not only simplifies the user experience but also reduces development effort and enhances the overall aesthetics of your app.

DatePicker Example :

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var dateTextField: UITextField!

    private var datePicker: UIDatePicker?

    override func viewDidLoad() {
        super.viewDidLoad()

        // Create and configure the date picker
        datePicker = UIDatePicker()
        datePicker?.datePickerMode = .dateAndTime
        datePicker?.addTarget(self, action: #selector(datePickerValueChanged), for: .valueChanged)

        // Assign the date picker as the input view for the text field
        dateTextField.inputView = datePicker

        // Add a toolbar with a done button to the input accessory view
        let toolbar = UIToolbar()
        toolbar.sizeToFit()

        let doneButton = UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(doneButtonTapped))
        toolbar.setItems([doneButton], animated: false)

        dateTextField.inputAccessoryView = toolbar
    }

    @objc func datePickerValueChanged() {
        // Format the selected date and update the text field
        let dateFormatter = DateFormatter()
        dateFormatter.dateStyle = .short
        dateFormatter.timeStyle = .short

        dateTextField.text = dateFormatter.string(from: datePicker?.date ?? Date())
    }

    @objc func doneButtonTapped() {
        // Hide the date picker when the done button is tapped
        dateTextField.resignFirstResponder()
    }
}

In this code, we have a UITextField (dateTextField) that will display the selected date and time.

In viewDidLoad(), we create and configure a UIDatePicker, set its datePickerMode to .dateAndTime, and add a target to handle value changes. The date picker is then assigned as the input view for the text field.

To enhance the user experience, we also add a toolbar as the input accessory view for the text field. The toolbar contains a “Done” button that dismisses the date picker.

The datePickerValueChanged() function is triggered whenever the user selects a new date or time. Inside this function, we format the selected date using a DateFormatter and update the text field’s text with the formatted date.

Finally, the doneButtonTapped() function is called when the “Done” button is tapped. It resigns the first responder status of the text field, hiding the date picker.

Remember to connect the dateTextField outlet to the respective UITextField in your interface file (Storyboard or XIB) for the code to work correctly.

date time picker ios github

Download

Date Time Picker iOS Github – UIDatepicker