Disable selection in TextField for selected Date in Swift

Question

I just begin to learn iOS dev, here I want to show a datePicker and get date from the user, but I don't know how to show a DataPicker from the bottom of screen. After searching, I found that: dataPicker can be activated by a textField simply by "myTextField.inputView = myDatepicker". I did that, but I faced questions:

1. After activating the datePicker, the user is able to cut, paste the date shown in the textField. Is there some way to disable the selection of the content in the textField and also the editing menu?

2. Instead of using a textField, if I want to use a UIButton/UILabel/cell to activate the dataPicker, How can I do that?(I mean how to show the DatePicker from the bottom. I found UIButton/UILabel/cell have no method .inputView like textField does)

It may simple, but really confused me, this is the first app I am trying to do. Any help is very much appreciated, especially in detail, in Swift. Thank you very much.

Answer 1

Way 1

Use a button to show the date and a button to show/ hide the datepicker embedded in a view.

class ViewController: UIViewController {

    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var datePicker: UIDatePicker!
    @IBOutlet weak var chooseDate: UIButton!

    @IBAction func toggleDatePicker(_ sender: Any) {
        datePicker.isHidden = !datePicker.isHidden
    }

    override func viewDidLoad() {
        dateLabel.text = stringFrom(date: Date())
        datePicker.isHidden = true
    }
}

extension ViewController: UIPickerViewDelegate {

    @IBAction func valueChanged() {
        dateLabel.text = stringFrom(date: datePicker.date)
    }

    private func stringFrom(date: Date) -> String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "dd-MM-yyyy"
        return dateFormatter.string(from: datePicker.date)
    }
}

Way 2

Use a button to show the date and a button to show/ hide the datepicker from the bottom.

Just use the following protocol that I wrote:

protocol DatePickable: class {

    var textField: UITextField { get }
    var datePicker: UIDatePicker { get }

    var isDatePickerVisible: Bool { get set }
}


extension DatePickable {

    func prepareDatePickerFor(view: UIView, onChangeAction: Selector) {
        datePicker.datePickerMode = UIDatePickerMode.date
        datePicker.addTarget(self, action: onChangeAction, for: .valueChanged)

        textField.inputView = datePicker
        view.addSubview(textField)
    }

    func toggleDatePicker() {
        isDatePickerVisible ? hideDatePicker() : showDatePicker()
        isDatePickerVisible = !isDatePickerVisible
    }

    private func showDatePicker() {
        textField.becomeFirstResponder()
    }

    private func hideDatePicker() {
        textField.resignFirstResponder()
    }
}

How to use the protocol in you class:

class ViewController: UIViewController, DatePickable {

    // Required by Datepickable
    var isDatePickerVisible = false

    var textField: UITextField = UITextField()
    var datePicker: UIDatePicker = UIDatePicker()

    // IBOutlets
    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var chooseDate: UIButton!

    override func viewDidLoad() {

        prepareDatePickerFor(view: view,
                             onChangeAction: #selector(ViewController.onDidChangeDate(_:)))

        dateLabel.text = stringFrom(date: Date())
    }

    @IBAction func toggleDatePickerVisibility(_ sender: Any) {
        toggleDatePicker()
    }

    @IBAction func onDidChangeDate(_ sender: Any) {
        dateLabel.text = stringFrom(date: datePicker.date)
    }

    private func stringFrom(date: Date) -> String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "dd-MM-yyyy"
        return dateFormatter.string(from: datePicker.date)
    }
}

Answer 2

So you have to add textfield delegate and then recognise the right textfield:

let datePicker = UIDatePicker()
func viewDidLoad() {
    super.viewDidLoad()
    txtDatePicker.delegate = self
}

func textFieldShouldBeginEditing(_ textField: UITextField) -> Bool {
    if textField == txtDatePicker {
        showDatePicker()
    }
    return true
}

Then inside showDatePicker you will tell your picker what mode should it be as follows:

func showDatePicker() {
    //Formate Date
    datePicker.datePickerMode = .date
    // if you need a toolbar, here is a good place to define it
    // add datepicker to textField
    txtDatePicker.inputView = datePicker
}

Then in delegate function or toolbar selection you do as follows:

func donedatePicker() {
    //For date formate

    let formatter = DateFormatter()
    formatter.dateFormat = "dd/MM/yyyy"
    txtDatePicker.text = formatter.string(from: datePicker.date)

    self.view.endEditing(true)
}